@livetiles/reach-components-react 0.4.0-preview.310 → 0.4.0-preview.313

package/en.async.esm.esm.js

@@ -1035,6 +1035,7 @@ var en = {
   "Themes.contrast.rating": "Contrast Rating: {rating}",
   "Themes.contrast.pass": "good",
   "Themes.contrast.fail": "fail",
+  "Themes.contrast.onWhite.info": "This is how the base color appears on a white background",
   "Themes.applyColors": "Apply",
   "Themes.baseColor.dark": "Base color",
   "Themes.accentColorToggle.label": "Use the highlight color for highlights on white background",

package/index.esm2.js

@@ -87849,9 +87849,9 @@ var AuthenticationContextProvider = function AuthenticationContextProvider(_a) {
   }), void 0);
 };
 
-var version$1 = "0.4.0-preview.310";
-var buildId = "100347";
-var commitId = "4f8af46c9e999a60fe141419fd746312ae4b4d2c";
+var version$1 = "0.4.0-preview.313";
+var buildId = "100376";
+var commitId = "916b802c1949cb2127b24368855e41b9dc4fafc1";
 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?
@@ -135699,9 +135699,11 @@ var ToolbarFilterPanel = function ToolbarFilterPanel(_a) {
       children = _a.children;
   var overflowContainerRef = useRef$1(null);
 
-  var _b = useState$2(false),
-      showScrollButtons = _b[0],
-      setShowScrollButtons = _b[1];
+  var _b = useState$2({
+    show: false
+  }),
+      scrollButtonsState = _b[0],
+      setScrollButtonsState = _b[1];
 
   useEffect$1(function () {
     var observer = new ResizeObserver_2(handleResize);
@@ -135710,6 +135712,23 @@ var ToolbarFilterPanel = function ToolbarFilterPanel(_a) {
       return observer.disconnect();
     }; // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+  useEffect$1(function () {
+    var scrollTimeout;
+
+    var scrollListener = function scrollListener() {
+      clearTimeout(scrollTimeout);
+      scrollTimeout = setTimeout(function () {
+        setScrollButtonDisabledState();
+      }, 100);
+    };
+
+    overflowContainerRef.current.addEventListener('scroll', scrollListener);
+    return function () {
+      var _a;
+
+      return (_a = overflowContainerRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('scroll', scrollListener);
+    };
+  });
   return jsx$1(FilterContextProvider, __assign$g({
     filter: filter,
     onChange: onChange
@@ -135719,17 +135738,19 @@ var ToolbarFilterPanel = function ToolbarFilterPanel(_a) {
         ref: overflowContainerRef
       }, {
         children: children
-      }), void 0), showScrollButtons && jsxs(Fragment, {
+      }), void 0), scrollButtonsState.show && jsxs(Fragment, {
         children: [jsx$1(ToolbarIconButton, {
           iconName: "ChevronLeft",
           onClick: function () {
             return handleScroll('left');
-          }
+          },
+          disabled: scrollButtonsState.disableLeft
         }, void 0), jsx$1(ToolbarIconButton, {
           iconName: "ChevronRight",
           onClick: function () {
             return handleScroll('right');
-          }
+          },
+          disabled: scrollButtonsState.disableRight
         }, void 0)]
       }, void 0)]
     }, void 0)
@@ -135798,7 +135819,28 @@ var ToolbarFilterPanel = function ToolbarFilterPanel(_a) {
   }
 
   function handleResize() {
-    setShowScrollButtons(overflowContainerRef.current.scrollWidth > overflowContainerRef.current.clientWidth);
+    setScrollButtonsState({
+      show: overflowContainerRef.current.scrollWidth > overflowContainerRef.current.clientWidth,
+      disableLeft: isLeftScrollButtonDisabled(),
+      disableRight: isRightScrollButtonDisabled()
+    });
+  }
+
+  function setScrollButtonDisabledState() {
+    setScrollButtonsState(function (s) {
+      return __assign$g(__assign$g({}, s), {
+        disableLeft: isLeftScrollButtonDisabled(),
+        disableRight: isRightScrollButtonDisabled()
+      });
+    });
+  }
+
+  function isLeftScrollButtonDisabled() {
+    return overflowContainerRef.current.scrollLeft === 0;
+  }
+
+  function isRightScrollButtonDisabled() {
+    return overflowContainerRef.current.scrollLeft + overflowContainerRef.current.clientWidth >= overflowContainerRef.current.scrollWidth;
   }
 };
 

package/index.umd.js

@@ -87705,9 +87705,9 @@
 	  }), void 0);
 	};
 
-	var version$1 = "0.4.0-preview.310";
-	var buildId = "100347";
-	var commitId = "4f8af46c9e999a60fe141419fd746312ae4b4d2c";
+	var version$1 = "0.4.0-preview.313";
+	var buildId = "100376";
+	var commitId = "916b802c1949cb2127b24368855e41b9dc4fafc1";
 	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?
@@ -135571,9 +135571,11 @@
 	      children = _a.children;
 	  var overflowContainerRef = React$d.useRef(null);
 
-	  var _b = React$d.useState(false),
-	      showScrollButtons = _b[0],
-	      setShowScrollButtons = _b[1];
+	  var _b = React$d.useState({
+	    show: false
+	  }),
+	      scrollButtonsState = _b[0],
+	      setScrollButtonsState = _b[1];
 
 	  React$d.useEffect(function () {
 	    var observer = new ResizeObserver_2(handleResize);
@@ -135582,6 +135584,23 @@
 	      return observer.disconnect();
 	    }; // eslint-disable-next-line react-hooks/exhaustive-deps
 	  }, []);
+	  React$d.useEffect(function () {
+	    var scrollTimeout;
+
+	    var scrollListener = function scrollListener() {
+	      clearTimeout(scrollTimeout);
+	      scrollTimeout = setTimeout(function () {
+	        setScrollButtonDisabledState();
+	      }, 100);
+	    };
+
+	    overflowContainerRef.current.addEventListener('scroll', scrollListener);
+	    return function () {
+	      var _a;
+
+	      return (_a = overflowContainerRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('scroll', scrollListener);
+	    };
+	  });
 	  return jsxRuntime.jsx(FilterContextProvider, __assign$g({
 	    filter: filter,
 	    onChange: onChange
@@ -135591,17 +135610,19 @@
 	        ref: overflowContainerRef
 	      }, {
 	        children: children
-	      }), void 0), showScrollButtons && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+	      }), void 0), scrollButtonsState.show && jsxRuntime.jsxs(jsxRuntime.Fragment, {
 	        children: [jsxRuntime.jsx(ToolbarIconButton, {
 	          iconName: "ChevronLeft",
 	          onClick: function () {
 	            return handleScroll('left');
-	          }
+	          },
+	          disabled: scrollButtonsState.disableLeft
 	        }, void 0), jsxRuntime.jsx(ToolbarIconButton, {
 	          iconName: "ChevronRight",
 	          onClick: function () {
 	            return handleScroll('right');
-	          }
+	          },
+	          disabled: scrollButtonsState.disableRight
 	        }, void 0)]
 	      }, void 0)]
 	    }, void 0)
@@ -135670,7 +135691,28 @@
 	  }
 
 	  function handleResize() {
-	    setShowScrollButtons(overflowContainerRef.current.scrollWidth > overflowContainerRef.current.clientWidth);
+	    setScrollButtonsState({
+	      show: overflowContainerRef.current.scrollWidth > overflowContainerRef.current.clientWidth,
+	      disableLeft: isLeftScrollButtonDisabled(),
+	      disableRight: isRightScrollButtonDisabled()
+	    });
+	  }
+
+	  function setScrollButtonDisabledState() {
+	    setScrollButtonsState(function (s) {
+	      return __assign$g(__assign$g({}, s), {
+	        disableLeft: isLeftScrollButtonDisabled(),
+	        disableRight: isRightScrollButtonDisabled()
+	      });
+	    });
+	  }
+
+	  function isLeftScrollButtonDisabled() {
+	    return overflowContainerRef.current.scrollLeft === 0;
+	  }
+
+	  function isRightScrollButtonDisabled() {
+	    return overflowContainerRef.current.scrollLeft + overflowContainerRef.current.clientWidth >= overflowContainerRef.current.scrollWidth;
 	  }
 	};
 
@@ -158729,6 +158771,7 @@
 	  "Themes.contrast.rating": "Contrast Rating: {rating}",
 	  "Themes.contrast.pass": "good",
 	  "Themes.contrast.fail": "fail",
+	  "Themes.contrast.onWhite.info": "This is how the base color appears on a white background",
 	  "Themes.applyColors": "Apply",
 	  "Themes.baseColor.dark": "Base color",
 	  "Themes.accentColorToggle.label": "Use the highlight color for highlights on white background",

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.310",
+  "version": "0.4.0-preview.313",
   "peerDependencies": {
     "react": "^16.14.0 || ^17",
     "react-dom": "^16.14.0 || ^17",