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

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.317";
+var buildId = "100412";
+var commitId = "9c02e0d4736499b754bbae62ca98daad30ed6490";
 var isCustomerBuild = false;
 var buildInfo = {
 	version: version$1,
@@ -131936,10 +131936,10 @@ if(nativeRevokeObjectURL)redefine$3(URLConstructor,'revokeObjectURL',function re
 var MDN_POLYFILL_BUG$1=!CORRECT_IS_REGEXP_LOGIC$1&&!!function(){var descriptor=getOwnPropertyDescriptor$2(String.prototype,'startsWith');return descriptor&&!descriptor.writable;}();// `String.prototype.startsWith` method
 // https://tc39.github.io/ecma262/#sec-string.prototype.startswith
 $$a({target:'String',proto:true,forced:!MDN_POLYFILL_BUG$1&&!CORRECT_IS_REGEXP_LOGIC$1},{startsWith:function startsWith(searchString/* , position = 0 */){var that=String(requireObjectCoercible$4(this));notARegExp$1(searchString);var index=toLength$6(min$3(arguments.length>1?arguments[1]:undefined,that.length));var search=String(searchString);return nativeStartsWith?nativeStartsWith.call(that,search,index):that.slice(index,index+search.length)===search;}});var mentionRegex=/[@#](\[(.+?)]\((.+?)\))/gi;var CommentInput=/*#__PURE__*/forwardRef(function(_a,ref){var disabled=_a.disabled,onEnter=_a.onEnter,onCtrlEnter=_a.onCtrlEnter,buttons=_a.buttons,content=_a.content,onChange=_a.onChange,onFocus=_a.onFocus,autoFocus=_a.autoFocus,className=_a.className,mentionSearchHandler=_a.mentionSearchHandler,placeHolderStringResourceKey=_a.placeHolderStringResourceKey,placeHolderStringResourceValues=_a.placeHolderStringResourceValues,disableBoxShadow=_a.disableBoxShadow,ariaLabel=_a.ariaLabel,additionalInputControl=_a.additionalInputControl;var formatMessage=useIntl().formatMessage;var handleSearch=useMentionsSearch(mentionSearchHandler,handleSearchComplete);var inputRef=useRef$1(null);var hostRef=useRef$1(null);// exists only for e2e tests, so we know when the focus has been set
-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
+var _b=useState$2(false),didInitialFocus=_b[0],setDidInitialFocus=_b[1];var showEmojiButton=!env.isNativeMobileApp;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?
@@ -131958,7 +131958,7 @@ suggestionsContainer.style.maxWidth=hostRect.width-4+"px";// this block fixes th
 // probably because we have a "custom" input box, the calculation of the
 // the mention library is not entirely correct, therefore we add our own
 // top / bottom values
-if(inputBox.top<500){suggestionsContainer.style.top=inputBox.height-10+"px";}else {suggestionsContainer.style.bottom=inputBox.height+"px";suggestionsContainer.style.top='unset';}}function getPlaceholder(){var placeholder=formatMessage({id:placeHolderStringResourceKey||inputPlaceholder},placeHolderStringResourceValues);if(!onCtrlEnter){return placeholder;}var browserHint=formatMessage({id:'PostMessage.inputPlaceholderHint'},{keyName:'CTRL'});return placeholder+" "+browserHint;}});function useMentionsSearch(mentionSearchHandler,handleSearchComplete){var _this=this;var searchSubject=useRef$1(new Subject());useEffect$1(function(){var subscription=searchSubject.current.pipe(debounceTime(500),switchMap(function(args){return __awaiter(_this,void 0,void 0,function(){var users;return __generator(this,function(_a){switch(_a.label){case 0:return [4/*yield*/,mentionSearchHandler(args.searchText)];case 1:users=_a.sent();args.updateSuggestions(users.map(function(u){return {id:u.id,upn:u.userPrincipalName,displayName:u.displayName,display:'@'+u.displayName};}));return [2/*return*/,users];}});});})).subscribe(function(){return handleSearchComplete();});return function(){subscription&&subscription.unsubscribe();};// eslint-disable-next-line react-hooks/exhaustive-deps
+if(inputBox.top<500){suggestionsContainer.style.top=inputBox.height-10+"px";}else {suggestionsContainer.style.bottom=inputBox.height+"px";suggestionsContainer.style.top='unset';}}function getPlaceholder(){var placeholder=formatMessage({id:placeHolderStringResourceKey||'CommentInput.placeholder'},placeHolderStringResourceValues);if(!onCtrlEnter){return placeholder;}var browserHint=formatMessage({id:'CommentInput.placeholderHint'},{keyName:'CTRL'});return placeholder+" "+browserHint;}});function useMentionsSearch(mentionSearchHandler,handleSearchComplete){var _this=this;var searchSubject=useRef$1(new Subject());useEffect$1(function(){var subscription=searchSubject.current.pipe(debounceTime(500),switchMap(function(args){return __awaiter(_this,void 0,void 0,function(){var users;return __generator(this,function(_a){switch(_a.label){case 0:return [4/*yield*/,mentionSearchHandler(args.searchText)];case 1:users=_a.sent();args.updateSuggestions(users.map(function(u){return {id:u.id,upn:u.userPrincipalName,displayName:u.displayName,display:'@'+u.displayName};}));return [2/*return*/,users];}});});})).subscribe(function(){return handleSearchComplete();});return function(){subscription&&subscription.unsubscribe();};// eslint-disable-next-line react-hooks/exhaustive-deps
 },[]);return function(searchText,updateSuggestions){searchSubject.current.next({searchText:searchText,updateSuggestions:updateSuggestions});};}var Host$W=_styled.div.withConfig({displayName:"CommentInput__Host",componentId:"sc-777bqz-0"})(templateObject_2$1y||(templateObject_2$1y=__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  ","\n\n  textarea {\n    font-family: 'Roboto', sans-serif !important;\n    font-size: 14px;\n    line-height: ","px;\n  }\n\n  .comment-input__suggestions {\n    @media (max-width: ","px) {\n      max-height: 300px;\n      overflow-y: auto;\n      padding-right: ","px;\n    }\n\n    &__list {\n      background-color: white;\n      border: 1px solid rgba(0, 0, 0, 0.15);\n      width: 100%;\n    }\n    &__item {\n      padding: 5px 15px;\n      border-bottom: 1px solid rgba(0, 0, 0, 0.15);\n\n      &:last-of-type {\n        border-bottom: none;\n      }\n\n      &--focused {\n        background-color: ",";\n      }\n    }\n  }\n"],["\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  ","\n\n  textarea {\n    font-family: 'Roboto', sans-serif !important;\n    font-size: 14px;\n    line-height: ","px;\n  }\n\n  .comment-input__suggestions {\n    @media (max-width: ","px) {\n      max-height: 300px;\n      overflow-y: auto;\n      padding-right: ","px;\n    }\n\n    &__list {\n      background-color: white;\n      border: 1px solid rgba(0, 0, 0, 0.15);\n      width: 100%;\n    }\n    &__item {\n      padding: 5px 15px;\n      border-bottom: 1px solid rgba(0, 0, 0, 0.15);\n\n      &:last-of-type {\n        border-bottom: none;\n      }\n\n      &--focused {\n        background-color: ",";\n      }\n    }\n  }\n"])),function(p){return p.disableBoxShadow?css$2(templateObject_1$2l||(templateObject_1$2l=__makeTemplateObject(["\n          border: 1px solid ",";\n        "],["\n          border: 1px solid ",";\n        "])),function(p){return p.theme.palette.neutralTertiaryAlt;}):CardBorderInline(2,2);},spacingM,maxScreenSize.medium,spacingXxs,defaultPageBackgroundColor);var Buttons$4=_styled.div.withConfig({displayName:"CommentInput__Buttons",componentId:"sc-777bqz-1"})(templateObject_3$11||(templateObject_3$11=__makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  box-sizing: border-box;\n  padding: ","px ","px;\n  background-color: ",";\n\n  && button {\n    background-color: transparent;\n\n    i {\n      font-size: 22px;\n    }\n  }\n"],["\n  display: flex;\n  justify-content: space-between;\n  box-sizing: border-box;\n  padding: ","px ","px;\n  background-color: ",";\n\n  && button {\n    background-color: transparent;\n\n    i {\n      font-size: 22px;\n    }\n  }\n"])),spacingXxs,spacingS+5,function(p){return p.theme.palette.neutralLighter;});var LeftSide=_styled.div.withConfig({displayName:"CommentInput__LeftSide",componentId:"sc-777bqz-2"})(templateObject_4$J||(templateObject_4$J=__makeTemplateObject(["\n  display: flex;\n  gap: ","px;\n\n  @media (min-width: ","px) {\n    gap: ","px;\n  }\n"],["\n  display: flex;\n  gap: ","px;\n\n  @media (min-width: ","px) {\n    gap: ","px;\n  }\n"])),spacingM+5,minScreenSize.medium,spacingS+5);var RightSide=_styled.div.withConfig({displayName:"CommentInput__RightSide",componentId:"sc-777bqz-3"})(templateObject_5$C||(templateObject_5$C=__makeTemplateObject(["\n  display: flex;\n  gap: ","px;\n  margin-left: auto;\n"],["\n  display: flex;\n  gap: ","px;\n  margin-left: auto;\n"])),spacingS);var InputContainer=_styled.div.withConfig({displayName:"CommentInput__InputContainer",componentId:"sc-777bqz-4"})(templateObject_6$s||(templateObject_6$s=__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  padding: ","px ","px;\n  background-color: ",";\n\n  .comment-input {\n    &__control {\n      background-color: transparent;\n      font-size: 14px;\n      font-weight: normal;\n      border: none;\n    }\n    &__input {\n      /*\n      * on small screens the MentionsInput renders a margin-left: -3px directly on the element\n      * Use !important to remove the minus margin to match our layout.\n      */\n      margin: 0 !important;\n      padding: 0;\n      outline: 0;\n      border: 0;\n    }\n    &__highlighter {\n      padding: 0;\n      border: 0;\n      font-family: 'Roboto', sans-serif !important;\n      font-size: 14px;\n      line-height: ","px;\n\n      strong {\n        ","\n      }\n    }\n  }\n"],["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  padding: ","px ","px;\n  background-color: ",";\n\n  .comment-input {\n    &__control {\n      background-color: transparent;\n      font-size: 14px;\n      font-weight: normal;\n      border: none;\n    }\n    &__input {\n      /*\n      * on small screens the MentionsInput renders a margin-left: -3px directly on the element\n      * Use !important to remove the minus margin to match our layout.\n      */\n      margin: 0 !important;\n      padding: 0;\n      outline: 0;\n      border: 0;\n    }\n    &__highlighter {\n      padding: 0;\n      border: 0;\n      font-family: 'Roboto', sans-serif !important;\n      font-size: 14px;\n      line-height: ","px;\n\n      strong {\n        ","\n      }\n    }\n  }\n"])),spacingS,spacingS+5,function(p){return p.theme.palette.white;},spacingM,"background-color: "+defaultPageBackgroundColor+";");var templateObject_1$2l,templateObject_2$1y,templateObject_3$11,templateObject_4$J,templateObject_5$C,templateObject_6$s;var DropTarget=_styled.div.withConfig({displayName:"DropInfo__DropTarget",componentId:"sc-1ky6ew9-0"})(templateObject_1$2k||(templateObject_1$2k=__makeTemplateObject(["\n  position: ",";\n  top: ",";\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: ",";\n\n  background-color: ",";\n\n  display: flex;\n  justify-content: center;\n"],["\n  position: ",";\n  top: ",";\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: ",";\n\n  background-color: ",";\n\n  display: flex;\n  justify-content: center;\n"])),function(_a){var isLarge=_a.isLarge,isActive=_a.isActive;return isLarge&&isActive?'fixed':'absolute';},function(_a){var isLarge=_a.isLarge;return isLarge?headerHeight+"px":'0';},function(_a){var isActive=_a.isActive;return isActive?300:0;},function(_a){var isActive=_a.isActive;return isActive?'rgba(253, 253, 253, 0.95)':'transparent';});var DropInfo=function DropInfo(_a){var isLarge=_a.isLarge;return jsx$1(Host$V,__assign({isLarge:isLarge},{children:jsxs(CenteredContainer,__assign({isLarge:isLarge},{children:[jsx$1(StyledIcon$8,{isLarge:isLarge,iconName:"bulkUpload",className:"ms-fontColor-accent"},void 0),jsx$1(FormattedMessage$1,{id:"Generic.dragToUploadTitle",tagName:"h2"},void 0),jsx$1(FormattedMessage$1,{id:"Generic.dragToUploadDescription",tagName:"p"},void 0)]}),void 0)}),void 0);};var Host$V=_styled.div.withConfig({displayName:"DropInfo__Host",componentId:"sc-1ky6ew9-1"})(templateObject_2$1x||(templateObject_2$1x=__makeTemplateObject(["\n  ",";\n  ",";\n"],["\n  ",";\n  ",";\n"])),function(_a){var isLarge=_a.isLarge;return !isLarge&&'display: flex';},function(_a){var isLarge=_a.isLarge;return !isLarge&&'align-items: center';});var CenteredContainer=_styled.div.withConfig({displayName:"DropInfo__CenteredContainer",componentId:"sc-1ky6ew9-2"})(templateObject_3$10||(templateObject_3$10=__makeTemplateObject(["\n  position: relative;\n  top: ",";\n\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n\n  h2 {\n    margin-bottom: 0;\n  }\n  p {\n    margin-top: 3px;\n  }\n"],["\n  position: relative;\n  top: ",";\n\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n\n  h2 {\n    margin-bottom: 0;\n  }\n  p {\n    margin-top: 3px;\n  }\n"])),function(_a){var isLarge=_a.isLarge;return isLarge?'20%':0;});var StyledIcon$8=_styled(Icon).withConfig({displayName:"DropInfo__StyledIcon",componentId:"sc-1ky6ew9-3"})(templateObject_4$I||(templateObject_4$I=__makeTemplateObject(["\n  font-size: ",";\n"],["\n  font-size: ",";\n"])),function(p){return p.isLarge?'100px':'50px';});var templateObject_1$2k,templateObject_2$1x,templateObject_3$10,templateObject_4$I;var hasValidGenericUrlVideoSourcePrefix=function hasValidGenericUrlVideoSourcePrefix(url){return url&&getAdditionalVideoSources().filter(function(s){return url.startsWith(s.prefix);}).length>0;};var VideoUrlParser=/** @class */function(){function VideoUrlParser(url){this.url=url;this.source=null;this.id=null;this.isDirectVideoUrl=false;this.videoProperties=null;this.thumbnailUrl=null;if(hasValidGenericUrlVideoSourcePrefix(this.url)){this.source=VideoSource.GenericUrl;this.id=url;}else if(VideoUrlParser.microsoftStreamRegex.test(this.url)){this.source=VideoSource.MicrosoftStream;this.id=VideoUrlParser.microsoftStreamRegex.exec(this.url)[1];}else if(VideoUrlParser.ytRegex.test(this.url)){this.source=VideoSource.YouTube;this.id=VideoUrlParser.ytRegex.exec(this.url)[1];}else if(VideoUrlParser.vimeoRegex.test(this.url)){this.source=VideoSource.Vimeo;this.id=VideoUrlParser.vimeoRegex.exec(this.url)[1];}else if(VideoUrlParser.vimeoDirectLinkRegex.test(this.url)){this.source=VideoSource.Vimeo;this.id=VideoUrlParser.vimeoDirectLinkRegex.exec(this.url)[1];this.isDirectVideoUrl=true;}else if(VideoUrlParser.vimeoRedirectLinkRegex.test(this.url)){this.source=VideoSource.Vimeo;this.id=VideoUrlParser.vimeoRedirectLinkRegex.exec(this.url)[1];}else if(VideoUrlParser.kalturaRegex.test(this.url)){var regexMatches=VideoUrlParser.kalturaRegex.exec(this.url);this.source=VideoSource.Kaltura;this.id=regexMatches[1];this.videoProperties={sp:regexMatches[2],uiconfId:regexMatches[3],partnerId:regexMatches[4],entryId:regexMatches[5]};this.thumbnailUrl="https://cdnsecakmi.kaltura.com/p/"+this.id+"/thumbnail/entry_id/"+this.videoProperties.entryId+"/width/1000";}}//TODO handle the different error messages for cloud and onprem versions, i.e. what sources are permitted (see task 23570)
 VideoUrlParser.prototype.isValid=function(features){var _this=this;if(this.source==null||this.id==null){return false;}if(features){var sources=getVideoSources(features);return sources.findIndex(function(s){return s.type===_this.source;})>=0;}return true;};VideoUrlParser.ytRegex=/^.*(?:(?:youtu.be\/)|(?:v\/)|(?:\/u\/\w\/)|(?:embed\/)|(?:watch\?))\??v?=?([^#&?]*).*$/;VideoUrlParser.vimeoRegex=/.*?(?:vimeo.com\/){1}(?:video\/)?(\d+)/;// match first GUID after domain
 VideoUrlParser.microsoftStreamRegex=/.*web\.microsoftstream\.com.+?([0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12})/i;VideoUrlParser.vimeoDirectLinkRegex=/.*?(?:player\.vimeo\.com\/external\/){1}(\d+)/;VideoUrlParser.vimeoRedirectLinkRegex=/.*?(?:player\.vimeo\.com\/progressive_redirect\/playback\/){1}(\d+)(?:\/.*)/;VideoUrlParser.kalturaRegex=/.+cdnapisec\.kaltura\.com\/p\/([0-9]+)\/sp\/([0-9]+)\/embedIframeJs\/uiconf_id\/([0-9]+)\/partner_id\/([0-9]+)(?:.*entry_id=(.+?(?=&|$)))/;return VideoUrlParser;}();function getVideoSources(features){var sources=[];if(features.editorYouTubeVideos){sources.push({type:VideoSource.YouTube,name:'YouTube'});}if(features.editorVimeoVideos){sources.push({type:VideoSource.Vimeo,name:'Vimeo'});}if(features.editorMicrosoftVideos){sources.push({type:VideoSource.MicrosoftStream,name:'Microsoft Stream'});}if(features.editorKalturaVideos){sources.push({type:VideoSource.Kaltura,name:'Kaltura'});}return sources;}// this is wrapped, because the "appconfig" does not exist in the component library
@@ -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;
   }
 };