@livetiles/reach-components-react 0.4.0-preview.311 → 0.4.0-preview.312

package/index.esm2.js

@@ -87849,9 +87849,9 @@ var AuthenticationContextProvider = function AuthenticationContextProvider(_a) {
   }), void 0);
 };
 
-var version$1 = "0.4.0-preview.311";
-var buildId = "100355";
-var commitId = "49813c162c17f0af5e2be4666f4c2c0fe6fbdd38";
+var version$1 = "0.4.0-preview.312";
+var buildId = "100367";
+var commitId = "6ebc60836600173adb26d3000b167ceff44b7b9b";
 var isCustomerBuild = false;
 var buildInfo = {
 	version: version$1,
@@ -131939,7 +131939,7 @@ $$a({target:'String',proto:true,forced:!MDN_POLYFILL_BUG$1&&!CORRECT_IS_REGEXP_L
 var _b=useState$2(false),didInitialFocus=_b[0],setDidInitialFocus=_b[1];var showEmojiButton=!env.isNativeMobileApp;var screenSize=useWindowSize$2();var inputPlaceholder=screenSize.width>maxScreenSize.medium?'PostMessage.inputPlaceholder':'PostMessage.inputPlaceholder.mobile';useImperativeHandle(ref,function(){return inputRef.current;},[inputRef]);useEffect$1(function(){if(autoFocus&&inputRef.current&&!didInitialFocus&&!disabled){// HACK: it seems as the react-mentions input does not like setting the focus
 // right away. Postpone it for a couple of ms
 // Unfortunately autoFocus={true} is not supported
-setTimeout(function(){focusOnEnd(inputRef.current);setDidInitialFocus(true);});}},[inputRef,autoFocus,didInitialFocus,disabled]);return jsxs(Host$W,__assign({ref:hostRef,className:classNames('comment-input__host',className),"data-comment-input":true,"data-did-initial-focus":didInitialFocus,disableBoxShadow:disableBoxShadow},{children:[jsxs(InputContainer,{children:[jsx$1(MentionsInput$1,__assign({className:"comment-input",value:content,singleLine:false,allowSpaceInQuery:true,onKeyDown:handleKeyDown,onChange:function(event){return onChange(event.target.value);},placeholder:getPlaceholder(),disabled:disabled,inputRef:inputRef,allowSuggestionsAboveCursor:true,onFocus:onFocus,"aria-label":ariaLabel},{children:jsx$1(Mention$1,{trigger:"@",data:handleSearch,appendSpaceOnAdd:true,renderSuggestion:function(s){var userSuggestion=s;return jsx$1(Avatar,{upn:userSuggestion.upn,text:userSuggestion.displayName,secondaryText:userSuggestion.upn},s.id);}},void 0)}),void 0),additionalInputControl]},void 0),jsxs(Buttons$4,{children:[(buttons.leftSide||showEmojiButton)&&jsx$1(Fragment,{children:jsxs(LeftSide,{children:[buttons.leftSide,jsx$1(EmojiButton,{onEmojiSelected:handleAddEmoji,disabled:disabled},void 0)]},void 0)},void 0),buttons.rightSide&&jsx$1(RightSide,{children:buttons.rightSide},void 0)]},void 0)]}),void 0);function handleAddEmoji(emoji){var mentionMatches=__spreadArray([],Array.from(getAllMatches(content,mentionRegex)));var cursorPosition=getCorrectCursorPosition(inputRef.current.selectionStart,mentionMatches);var end=getCorrectCursorPosition(inputRef.current.selectionEnd,mentionMatches);var before=content.substring(0,cursorPosition);var after=content.substring(end);onChange(before+emoji+after);setTimeout(function(){inputRef.current.focus();inputRef.current.setSelectionRange(cursorPosition+2,cursorPosition+2);},0);}function getCorrectCursorPosition(cursorPosition,matches){// this method is required because for the user visible content in the textbox will look like this:
+setTimeout(function(){focusOnEnd(inputRef.current);setDidInitialFocus(true);});}},[inputRef,autoFocus,didInitialFocus,disabled]);return jsxs(Host$W,__assign({ref:hostRef,className:classNames('comment-input__host',className),"data-comment-input":true,"data-did-initial-focus":didInitialFocus,disableBoxShadow:disableBoxShadow},{children:[jsxs(InputContainer,{children:[jsx$1(MentionsInput$1,__assign({className:"comment-input",value:content,singleLine:false,allowSpaceInQuery:true,onKeyDown:handleKeyDown,onChange:function(event){return onChange(event.target.value);},placeholder:getPlaceholder(),disabled:disabled,inputRef:inputRef,allowSuggestionsAboveCursor:true,onFocus:onFocus,"aria-label":ariaLabel},{children:jsx$1(Mention$1,{trigger:"@",data:handleSearch,appendSpaceOnAdd:true,renderSuggestion:function(s){var userSuggestion=s;return jsx$1(Avatar,{upn:userSuggestion.upn,text:userSuggestion.displayName,secondaryText:userSuggestion.upn},s.id);}},void 0)}),void 0),additionalInputControl]},void 0),jsxs(Buttons$4,{children:[((buttons===null||buttons===void 0?void 0:buttons.leftSide)||showEmojiButton)&&jsx$1(Fragment,{children:jsxs(LeftSide,{children:[buttons===null||buttons===void 0?void 0:buttons.leftSide,jsx$1(EmojiButton,{onEmojiSelected:handleAddEmoji,disabled:disabled},void 0)]},void 0)},void 0),(buttons===null||buttons===void 0?void 0:buttons.rightSide)&&jsx$1(RightSide,{children:buttons.rightSide},void 0)]},void 0)]}),void 0);function handleAddEmoji(emoji){var mentionMatches=__spreadArray([],Array.from(getAllMatches(content,mentionRegex)));var cursorPosition=getCorrectCursorPosition(inputRef.current.selectionStart,mentionMatches);var end=getCorrectCursorPosition(inputRef.current.selectionEnd,mentionMatches);var before=content.substring(0,cursorPosition);var after=content.substring(end);onChange(before+emoji+after);setTimeout(function(){inputRef.current.focus();inputRef.current.setSelectionRange(cursorPosition+2,cursorPosition+2);},0);}function getCorrectCursorPosition(cursorPosition,matches){// this method is required because for the user visible content in the textbox will look like this:
 // hallo @Shimp Pansen how are you?
 // while the internal value looks like this:
 // hallo @[@Shimp Pansen](60a25c30cfc17a0c3b5f2d53) how are you?

package/index.umd.js

@@ -87705,9 +87705,9 @@
 	  }), void 0);
 	};
 
-	var version$1 = "0.4.0-preview.311";
-	var buildId = "100355";
-	var commitId = "49813c162c17f0af5e2be4666f4c2c0fe6fbdd38";
+	var version$1 = "0.4.0-preview.312";
+	var buildId = "100367";
+	var commitId = "6ebc60836600173adb26d3000b167ceff44b7b9b";
 	var isCustomerBuild = false;
 	var buildInfo = {
 		version: version$1,
@@ -131811,7 +131811,7 @@
 	var _b=React$d.useState(false),didInitialFocus=_b[0],setDidInitialFocus=_b[1];var showEmojiButton=!env.isNativeMobileApp;var screenSize=useWindowSize$2();var inputPlaceholder=screenSize.width>maxScreenSize.medium?'PostMessage.inputPlaceholder':'PostMessage.inputPlaceholder.mobile';React$d.useImperativeHandle(ref,function(){return inputRef.current;},[inputRef]);React$d.useEffect(function(){if(autoFocus&&inputRef.current&&!didInitialFocus&&!disabled){// HACK: it seems as the react-mentions input does not like setting the focus
 	// right away. Postpone it for a couple of ms
 	// Unfortunately autoFocus={true} is not supported
-	setTimeout(function(){focusOnEnd(inputRef.current);setDidInitialFocus(true);});}},[inputRef,autoFocus,didInitialFocus,disabled]);return jsxRuntime.jsxs(Host$W,__assign({ref:hostRef,className:classNames('comment-input__host',className),"data-comment-input":true,"data-did-initial-focus":didInitialFocus,disableBoxShadow:disableBoxShadow},{children:[jsxRuntime.jsxs(InputContainer,{children:[jsxRuntime.jsx(MentionsInput$1,__assign({className:"comment-input",value:content,singleLine:false,allowSpaceInQuery:true,onKeyDown:handleKeyDown,onChange:function(event){return onChange(event.target.value);},placeholder:getPlaceholder(),disabled:disabled,inputRef:inputRef,allowSuggestionsAboveCursor:true,onFocus:onFocus,"aria-label":ariaLabel},{children:jsxRuntime.jsx(Mention$1,{trigger:"@",data:handleSearch,appendSpaceOnAdd:true,renderSuggestion:function(s){var userSuggestion=s;return jsxRuntime.jsx(Avatar,{upn:userSuggestion.upn,text:userSuggestion.displayName,secondaryText:userSuggestion.upn},s.id);}},void 0)}),void 0),additionalInputControl]},void 0),jsxRuntime.jsxs(Buttons$4,{children:[(buttons.leftSide||showEmojiButton)&&jsxRuntime.jsx(jsxRuntime.Fragment,{children:jsxRuntime.jsxs(LeftSide,{children:[buttons.leftSide,jsxRuntime.jsx(EmojiButton,{onEmojiSelected:handleAddEmoji,disabled:disabled},void 0)]},void 0)},void 0),buttons.rightSide&&jsxRuntime.jsx(RightSide,{children:buttons.rightSide},void 0)]},void 0)]}),void 0);function handleAddEmoji(emoji){var mentionMatches=__spreadArray([],Array.from(getAllMatches(content,mentionRegex)));var cursorPosition=getCorrectCursorPosition(inputRef.current.selectionStart,mentionMatches);var end=getCorrectCursorPosition(inputRef.current.selectionEnd,mentionMatches);var before=content.substring(0,cursorPosition);var after=content.substring(end);onChange(before+emoji+after);setTimeout(function(){inputRef.current.focus();inputRef.current.setSelectionRange(cursorPosition+2,cursorPosition+2);},0);}function getCorrectCursorPosition(cursorPosition,matches){// this method is required because for the user visible content in the textbox will look like this:
+	setTimeout(function(){focusOnEnd(inputRef.current);setDidInitialFocus(true);});}},[inputRef,autoFocus,didInitialFocus,disabled]);return jsxRuntime.jsxs(Host$W,__assign({ref:hostRef,className:classNames('comment-input__host',className),"data-comment-input":true,"data-did-initial-focus":didInitialFocus,disableBoxShadow:disableBoxShadow},{children:[jsxRuntime.jsxs(InputContainer,{children:[jsxRuntime.jsx(MentionsInput$1,__assign({className:"comment-input",value:content,singleLine:false,allowSpaceInQuery:true,onKeyDown:handleKeyDown,onChange:function(event){return onChange(event.target.value);},placeholder:getPlaceholder(),disabled:disabled,inputRef:inputRef,allowSuggestionsAboveCursor:true,onFocus:onFocus,"aria-label":ariaLabel},{children:jsxRuntime.jsx(Mention$1,{trigger:"@",data:handleSearch,appendSpaceOnAdd:true,renderSuggestion:function(s){var userSuggestion=s;return jsxRuntime.jsx(Avatar,{upn:userSuggestion.upn,text:userSuggestion.displayName,secondaryText:userSuggestion.upn},s.id);}},void 0)}),void 0),additionalInputControl]},void 0),jsxRuntime.jsxs(Buttons$4,{children:[((buttons===null||buttons===void 0?void 0:buttons.leftSide)||showEmojiButton)&&jsxRuntime.jsx(jsxRuntime.Fragment,{children:jsxRuntime.jsxs(LeftSide,{children:[buttons===null||buttons===void 0?void 0:buttons.leftSide,jsxRuntime.jsx(EmojiButton,{onEmojiSelected:handleAddEmoji,disabled:disabled},void 0)]},void 0)},void 0),(buttons===null||buttons===void 0?void 0:buttons.rightSide)&&jsxRuntime.jsx(RightSide,{children:buttons.rightSide},void 0)]},void 0)]}),void 0);function handleAddEmoji(emoji){var mentionMatches=__spreadArray([],Array.from(getAllMatches(content,mentionRegex)));var cursorPosition=getCorrectCursorPosition(inputRef.current.selectionStart,mentionMatches);var end=getCorrectCursorPosition(inputRef.current.selectionEnd,mentionMatches);var before=content.substring(0,cursorPosition);var after=content.substring(end);onChange(before+emoji+after);setTimeout(function(){inputRef.current.focus();inputRef.current.setSelectionRange(cursorPosition+2,cursorPosition+2);},0);}function getCorrectCursorPosition(cursorPosition,matches){// this method is required because for the user visible content in the textbox will look like this:
 	// hallo @Shimp Pansen how are you?
 	// while the internal value looks like this:
 	// hallo @[@Shimp Pansen](60a25c30cfc17a0c3b5f2d53) how are you?

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@livetiles/reach-components-react",
   "description": "Provides React components to consume LiveTiles Reach data",
-  "version": "0.4.0-preview.311",
+  "version": "0.4.0-preview.312",
   "peerDependencies": {
     "react": "^16.14.0 || ^17",
     "react-dom": "^16.14.0 || ^17",