vss-ui - npm Package Compare versions

Comparing version 3.125.2 to 3.127.0

Components/ContextualMenuButton/ContextualMenuButton.d.ts

@@ -11,3 +11,3 @@ /// <reference types="react" />
     isOpen: boolean;
-    target?: IPoint | undefined;
+    target?: HTMLElement | string | MouseEvent | IPoint | null;
     useTargetPoint?: boolean;
@@ -19,2 +19,3 @@ }
 export declare class ContextualMenuButton extends BaseComponent<IContextualMenuButtonProps, IContextualMenuButtonState> {
+    static readonly ButtonContainerClassName: string;
     private static buttonRef;
@@ -21,0 +22,0 @@ private _contextMenuExpandedId;

Components/ContextualMenuButton/ContextualMenuButton.js

@@ -1,1 +0,1 @@
-import*as tslib_1 from"tslib";import*as React from"react";import{DefaultButton,PrimaryButton}from"office-ui-fabric-react/lib/Button";import{Icon}from"office-ui-fabric-react/lib/Icon";import{TooltipHost}from"office-ui-fabric-react/lib/Tooltip";import{autobind,BaseComponent,css,getId,getNativeProps,buttonProperties}from"office-ui-fabric-react/lib/Utilities";import{VssContextualMenu}from"../../VssContextualMenu";import{VssIcon}from"../../VssIcon";import"./ContextualMenuButton.css";var ContextualMenuButton=function(t){function e(e){return t.call(this,e)||this}return tslib_1.__extends(e,t),e.prototype.focus=function(){this._button&&this._button.focus&&this._button.focus()},e.prototype.componentWillReceiveProps=function(t){t.isOpen&&!this.state.items&&this.setState({items:this.props.getItems(),providers:this.props.getItemProviders?this.props.getItemProviders():[]})},e.prototype.componentWillMount=function(){this.props.isOpen?this.state={isOpen:!0,providers:this.props.getItemProviders?this.props.getItemProviders():[],items:this.props.getItems()}:this.state={items:void 0,providers:void 0,isOpen:!1},this._contextMenuExpandedId=getId("context-menu-expanded")},e.prototype.componentDidMount=function(){t.prototype.componentDidMount.call(this),this._isMounted=!0},e.prototype.componentWillUnmount=function(){this._isMounted=!1,t.prototype.componentWillUnmount.call(this)},e.prototype.render=function(){var t,o=this,s=this.props,i=s.className,n=s.ctaButton,r=s.directionalHint,p=s.iconProps,a=s.showTooltip,u=s.title,c=s.allocateSpaceWhileHidden,l=this.state.isOpen||this.props.isOpen||!1,m=this.state.useTargetPoint||this.props.useTargetPoint,h=this.state.target?this.state.target:this.props.targetPoint,d=tslib_1.__assign({},getNativeProps(this.props,buttonProperties),{componentRef:function(t){return o._button=t},onClick:this._onClick,ariaLabel:u,className:css("vss-ContextualMenuButton","contextual-menu-button",i,{open:l,"space-allocated":c,"space-unallocated":!c}),"aria-haspopup":!0,"aria-expanded":l,"aria-controls":l?this._contextMenuExpandedId:null});t=p?React.createElement(Icon,tslib_1.__assign({},VssIcon.getIconProps(p))):null;var f;return f=n?React.createElement(PrimaryButton,tslib_1.__assign({},d),t):React.createElement(DefaultButton,tslib_1.__assign({},d),t),u&&a&&(f=React.createElement(TooltipHost,{content:u},f)),React.createElement("div",{className:"vss-ContextualMenu--container",ref:e.buttonRef},f,l&&this.state.items&&React.createElement(VssContextualMenu,{providers:this.state.providers,items:this.state.items,onDismiss:this._onDismiss,shouldFocusOnMount:!0,gapSpace:m?5:0,directionalHint:r,target:this.refs[e.buttonRef],targetPoint:h,useTargetPoint:m}))},e.prototype._onClick=function(t){var e=this.props,o=e.onClick,s=e.useTargetPoint;o&&o(t)||t.stopPropagation(),this.setState({items:this.props.getItems()}),t.clientX&&s?this.setState({isOpen:!0,providers:this.props.getItemProviders?this.props.getItemProviders():[],useTargetPoint:!0,target:{x:t.clientX,y:t.clientY}}):this.setState({isOpen:!0,providers:this.props.getItemProviders?this.props.getItemProviders():[],useTargetPoint:!1})},e.prototype._onDismiss=function(){this._isMounted&&(this.props.onDismiss&&this.props.onDismiss(),this.setState({target:null,isOpen:!1,useTargetPoint:!1,items:void 0,providers:void 0}))},e.buttonRef="button",tslib_1.__decorate([autobind],e.prototype,"_onClick",null),tslib_1.__decorate([autobind],e.prototype,"_onDismiss",null),e}(BaseComponent);export{ContextualMenuButton};
+import*as tslib_1 from"tslib";import*as React from"react";import{DefaultButton,PrimaryButton}from"office-ui-fabric-react/lib/Button";import{Icon}from"office-ui-fabric-react/lib/Icon";import{TooltipHost}from"office-ui-fabric-react/lib/Tooltip";import{autobind,BaseComponent,css,getId,getNativeProps,buttonProperties}from"office-ui-fabric-react/lib/Utilities";import{VssContextualMenu}from"../../VssContextualMenu";import{VssIcon}from"../../VssIcon";import"./ContextualMenuButton.css";var ContextualMenuButton=function(t){function e(e){var o=t.call(this,e)||this;return o._warnDeprecations({targetPoint:"target",useTargetPoint:"target"}),o}return tslib_1.__extends(e,t),e.prototype.focus=function(){this._button&&this._button.focus&&this._button.focus()},e.prototype.componentWillReceiveProps=function(t){t.isOpen&&!this.state.items&&this.setState({items:this.props.getItems(),providers:this.props.getItemProviders?this.props.getItemProviders():[]})},e.prototype.componentWillMount=function(){this.props.isOpen?this.state={isOpen:!0,providers:this.props.getItemProviders?this.props.getItemProviders():[],items:this.props.getItems()}:this.state={items:void 0,providers:void 0,isOpen:!1},this._contextMenuExpandedId=getId("context-menu-expanded")},e.prototype.componentDidMount=function(){t.prototype.componentDidMount.call(this),this._isMounted=!0},e.prototype.componentWillUnmount=function(){this._isMounted=!1,t.prototype.componentWillUnmount.call(this)},e.prototype.render=function(){var t=this,o=this.props,s=o.className,i=o.ctaButton,n=o.directionalHint,r=o.iconProps,a=o.showTooltip,p=o.title,u=o.allocateSpaceWhileHidden,c=this.state.isOpen||this.props.isOpen||!1,l=this.state.target||this.props.target||this.props.targetPoint,m=this.state.useTargetPoint||this.props.useTargetPoint;void 0===m&&(m=l&&void 0!==l.x&&void 0!==l.y);var d,h=tslib_1.__assign({},getNativeProps(this.props,buttonProperties),{componentRef:function(e){return t._button=e},onClick:this._onClick,ariaLabel:p,className:css("vss-ContextualMenuButton","contextual-menu-button",s,{open:c,"space-allocated":u,"space-unallocated":!u}),"aria-haspopup":!0,"aria-expanded":c,"aria-controls":c?this._contextMenuExpandedId:null});d=r?React.createElement(Icon,tslib_1.__assign({},VssIcon.getIconProps(r))):null;var f;return f=i?React.createElement(PrimaryButton,tslib_1.__assign({},h),d):React.createElement(DefaultButton,tslib_1.__assign({},h),d),p&&a&&(f=React.createElement(TooltipHost,{content:p},f)),React.createElement("div",{className:e.ButtonContainerClassName,ref:e.buttonRef},f,c&&this.state.items&&React.createElement(VssContextualMenu,{providers:this.state.providers,items:this.state.items,onDismiss:this._onDismiss,shouldFocusOnMount:!0,gapSpace:m?5:0,directionalHint:n,target:l||this.refs[e.buttonRef]}))},e.prototype._onClick=function(t){var e=this.props,o=e.onClick,s=e.useTargetPoint;o&&o(t)||t.stopPropagation(),this.setState({items:this.props.getItems()}),t.clientX&&s?this.setState({isOpen:!0,providers:this.props.getItemProviders?this.props.getItemProviders():[],useTargetPoint:!0,target:{x:t.clientX,y:t.clientY}}):this.setState({isOpen:!0,providers:this.props.getItemProviders?this.props.getItemProviders():[],useTargetPoint:!1})},e.prototype._onDismiss=function(){this._isMounted&&(this.props.onDismiss&&this.props.onDismiss(),this.setState({target:null,isOpen:!1,useTargetPoint:!1,items:void 0,providers:void 0}))},e.ButtonContainerClassName="vss-ContextualMenu--container",e.buttonRef="button",tslib_1.__decorate([autobind],e.prototype,"_onClick",null),tslib_1.__decorate([autobind],e.prototype,"_onDismiss",null),e}(BaseComponent);export{ContextualMenuButton};

Components/ContextualMenuButton/MoreActionsButton.js

@@ -1,1 +0,1 @@
-import*as tslib_1 from"tslib";import*as React from"react";import{ContextualMenuButton}from"../../Components/ContextualMenuButton/ContextualMenuButton";import{BaseComponent}from"office-ui-fabric-react/lib/Utilities";import*as Preview_Resources from"../../Resources/VSS.Resources.VSSUI";var MoreActionsButton=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e._contextualMenuRef=null,e}return tslib_1.__extends(e,t),Object.defineProperty(e.prototype,"contextualMenuRef",{get:function(){return this._contextualMenuRef},enumerable:!0,configurable:!0}),e.prototype.render=function(){var t=this;return React.createElement(ContextualMenuButton,tslib_1.__assign({},this.props,{ref:function(e){t._contextualMenuRef=e},iconProps:{iconName:"More"},title:Preview_Resources.MoreActionsText}))},e.prototype.componentWillUnmount=function(){this._contextualMenuRef=null},e}(BaseComponent);export{MoreActionsButton};
+import*as tslib_1 from"tslib";import*as React from"react";import{ContextualMenuButton}from"../../Components/ContextualMenuButton/ContextualMenuButton";import{BaseComponent}from"office-ui-fabric-react/lib/Utilities";import*as Preview_Resources from"../../Resources/VSS.Resources.VSSUI";var MoreActionsButton=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e._contextualMenuRef=null,e}return tslib_1.__extends(e,t),Object.defineProperty(e.prototype,"contextualMenuRef",{get:function(){return this._contextualMenuRef},enumerable:!0,configurable:!0}),e.prototype.render=function(){var t=this;return React.createElement(ContextualMenuButton,tslib_1.__assign({},this.props,{ref:function(e){t._contextualMenuRef=e},iconProps:{iconName:"More"},title:this.props.title||Preview_Resources.MoreActionsText}))},e.prototype.componentWillUnmount=function(){this._contextualMenuRef=null},e}(BaseComponent);export{MoreActionsButton};

Components/FileInput/FileInput.js

@@ -1,1 +0,1 @@
-function tryDetectFileEncoding(e){if(void 0===window.atob)return FileEncoding.Unknown;for(var t=window.atob(e),i=[],r=0;r<4;r++)i.push(t.charCodeAt(r));if(254===i[0]&&255===i[1])return FileEncoding.UTF16_BE;if(255===i[0]&&254===i[1])return 0===i[2]&&0===i[3]?FileEncoding.UTF32_LE:FileEncoding.UTF16_LE;if(239===i[0]&&187===i[1]&&191===i[2])return FileEncoding.UTF8;if(0===i[0]&&0===i[1]&&254===i[2]&&255===i[3])return FileEncoding.UTF32_BE;for(var s=!0,r=0,n=t.length;r<n;r++){var o=t.charCodeAt(r);if((o<=31||127==o)&&9!=o&&12!=o&&13!=o&&10!=o&&26!=o)return FileEncoding.Binary;o>127&&(s=!1)}return s?FileEncoding.ASCII:FileEncoding.UTF8}import*as tslib_1 from"tslib";import*as React from"react";import{autobind,BaseComponent,css,format}from"office-ui-fabric-react/lib/Utilities";import*as VSSUIResources from"../../Resources/VSS.Resources.VSSUI";import{FileEncoding,FileInputContentType}from"../../Components/FileInput/FileInput.Props";import"./FileInput.css";var FileInput=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t._files=[],t}return tslib_1.__extends(t,e),t.prototype.render=function(){var e=this.props.maximumNumberOfFiles||0,t=this._files,i=this.state&&this.state.errorMessage?this.state.errorMessage:"",r=!e||t.length<e,s=null;if(this.props.allowedFileExtensions){s=this.props.allowedFileExtensions.map(function(e){return"."!==e[0]?"."+e:e}).join()}var n=1===e?VSSUIResources.FileInputDragDropSingleFileLabel:VSSUIResources.FileInputDragDropLabel,o=1!==e;return React.createElement(FileInputPure,{dragDropLabel:n,multiple:o,canAddMoreFiles:r,accept:s,files:t,errorMessage:i,addFiles:this._addFiles,remove:this._remove,clear:this._clear})},t.prototype._clear=function(){this._files.forEach(function(e){e.fileReader.readyState!==FileReader.DONE&&e.fileReader.abort()}),this._files=[],this.setState({files:this._files,errorMessage:""}),this._triggerUpdateEvent()},t.prototype._remove=function(e){this._files=this._files.filter(function(t){return t!==e}),this.setState({files:this._files}),this._triggerUpdateEvent()},t.prototype._addFiles=function(e){if(this.props.allowedFileExtensions&&this.props.allowedFileExtensions.length>0)for(n=0;n<e.length;n++){for(var t=e[n].name.split(".").pop(),i=!1,r=0;r<this.props.allowedFileExtensions.length;r++)if(t.toLocaleLowerCase()===this.props.allowedFileExtensions[r].toLocaleLowerCase()){i=!0;break}if(!i){c=format(VSSUIResources.FileInputErrorNotAllowedExtensionType,t,this.props.allowedFileExtensions.join());return void this.setState({errorMessage:c})}}for(var s={},n=0,o=this._files.length;n<o;n++)s[this.props.fileNamesCaseSensitive?this._files[n].result.name:this._files[n].result.name.toLowerCase()]=1;for(var a=this._getTotalFilesSize(),n=0,o=e.length;n<o;n++){if(this.props.maximumSingleFileSize&&e[n].size>this.props.maximumSingleFileSize){c=this._getLimitErrorMessage(format(VSSUIResources.FileInputErrorMaxFileSize,e[n].name,this._getFriendlySizeString(e[n].size),this._getFriendlySizeString(this.props.maximumSingleFileSize)),{fileSize:e[n].size});return void this.setState({errorMessage:c})}a+=e[n].size;var l=this.props.fileNamesCaseSensitive?e[n].name:e[n].name.toLowerCase();if(s[l]){c=format(VSSUIResources.FileInputErrorDuplicateFileName,e[n].name);return void this.setState({errorMessage:c})}s[l]=1}if(this.props.maximumTotalFileSize&&a>this.props.maximumTotalFileSize){c=this._getLimitErrorMessage(format(VSSUIResources.FileInputErrorTotalFileSize,this._getFriendlySizeString(a),this._getFriendlySizeString(this.props.maximumTotalFileSize)),{totalSize:a});this.setState({errorMessage:c})}else{var p=this._files.length+e.length;if(this.props.maximumNumberOfFiles&&p>this.props.maximumNumberOfFiles){var u=1===this.props.maximumNumberOfFiles?VSSUIResources.FileInputErrorSingleFileOnly:format(VSSUIResources.FileInputErrorMaxNumFiles,this.props.maximumNumberOfFiles),c=this._getLimitErrorMessage(u,{fileCount:p});this.setState({errorMessage:c})}else for(var n=0,o=e.length;n<o;n++)this._addFile(e[n])}},t.prototype._addFile=function(e){var t=this,i={name:e.name,size:e.size,type:e.type,lastModifiedDate:e.lastModifiedDate,statusText:VSSUIResources.Loading,isError:!1},r=new FileReader,s={result:i,fileReader:r};this._files.push(s);var n=function(){t.setState({files:t._files,errorMessage:t.state&&t.state.errorMessage?t.state.errorMessage:""}),t._triggerUpdateEvent()},o=function(){i.statusText=t._getFriendlySizeString(e.size),n()};r.onload=function(e){if(i.encoding=FileEncoding.Unknown,t.props.resultContentType===FileInputContentType.RawText)i.content=r.result||"";else{var s=r.result;s&&s.indexOf(",")>-1?(i.content=s.substr(s.indexOf(",")+1),"//"===i.content.substr(0,2)&&i.content.length%4==2&&(i.content=i.content.substr(2))):i.content="",t.props.detectEncoding&&(i.encoding=tryDetectFileEncoding(i.content))}o()},r.onerror=function(e){format(VSSUIResources.FileInputReadErrorFormat,i.name,e.message);i.statusText=VSSUIResources.FileInputErrorLabel,i.isError=!0,n()},r.onloadend=function(e){n()},this.props.resultContentType===FileInputContentType.RawText?r.readAsText(e):this.props.resultContentType===FileInputContentType.RawFile?(i.encoding=FileEncoding.Unknown,i.file=e,o(),n()):r.readAsDataURL(e)},t.prototype._triggerUpdateEvent=function(){this.props.updateHandler&&this.props.updateHandler({loading:this._files.some(function(e){return e.fileReader.readyState!==FileReader.DONE}),files:this._files})},t.prototype._getTotalFilesSize=function(){for(var e=0,t=this._files,i=0,r=t.length;i<r;i++)e+=t[i].result.size;return e},t.prototype._getLimitErrorMessage=function(e,t){var i=e;return this.props.limitMessageFormatter&&(i=this.props.limitMessageFormatter(e,t)),i},t.prototype._getFriendlySizeString=function(e,t){void 0===t&&(t=1);Math.pow(10,t);return e<1024?format(VSSUIResources.FileSizeBytesFormat,e):e<1048576?format(VSSUIResources.FileSizeKBFormat,Math.round(e/1024*10)/10):format(VSSUIResources.FileSizeMBFormat,Math.round(e/1048576*10)/10)},tslib_1.__decorate([autobind],t.prototype,"_clear",null),tslib_1.__decorate([autobind],t.prototype,"_remove",null),tslib_1.__decorate([autobind],t.prototype,"_addFiles",null),t}(BaseComponent);export{FileInput};var FileInputPure=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return tslib_1.__extends(t,e),t.prototype.render=function(){var e=this,t=css("vss-FileInput-filesDropTarget",this.state.isDragging?this.props.dragOverCssClass||"vss-FileInput-dragOver":"");return React.createElement("div",{className:"vss-FileInput"},this.props.canAddMoreFiles&&React.createElement("div",{className:t,onDragOver:this._onDragOver,onDragLeave:this._onDragLeave,onDragEnter:this._onDragEnter,onDrop:this._onDrop},React.createElement("table",{className:"vss-FileInput-dragDropTable"},React.createElement("tbody",null,React.createElement("tr",{className:"vss-FileInput-dragDropRow"},React.createElement("td",{className:"vss-FileInput-dragDropLabel"},React.createElement("span",null,this.props.dragDropLabel)),React.createElement("td",{className:"vss-FileInput-browseButton"},React.createElement("button",{className:"vss-FileInput-browseContainer",onKeyPress:this._onBrowseContainerKeyPress,onClick:this._onBrowseContainerClick},VSSUIResources.FileInputBrowseButtonLabel),React.createElement("input",{type:"file",ref:this._resolveFileInput,onChange:this._onFileInputChange,accept:this.props.accept,multiple:this.props.multiple,style:{display:"none"}})))))),this.props.files.length>1&&React.createElement("div",{className:"vss-FileInput-overallStatusContainer"},React.createElement("span",{className:"vss-FileInput-overallStatusActions"},React.createElement("a",{onClick:this._onClearClick},VSSUIResources.FileInputRemoveAll))),React.createElement("div",{className:"vss-FileInput-errorContainer"},this.props.errorMessage),this.props.files.length>0&&React.createElement("ul",{className:"vss-FileInput-fileList",style:{display:"block"}},this.props.files.map(function(t){return React.createElement("li",{key:t.result.name},React.createElement("div",{className:"vss-FileInput-headerContainer"},React.createElement("span",{className:"vss-FileInput-fileName"},t.result.name)),React.createElement("div",{className:"vss-FileInput-detailsContainer"},React.createElement("span",{className:"vss-FileInput-status"},t.result.statusText),React.createElement("span",{className:"vss-FileInput-links"},React.createElement("a",{onClick:function(){return e._onRemoveClick(t)},role:"button"},VSSUIResources.FileInputRemoveFile))))})))},t.prototype.componentWillMount=function(){this.setState({isDragging:!1})},t.prototype._onClearClick=function(){this.props.clear&&this.props.clear()},t.prototype._onRemoveClick=function(e){this.props.remove&&this.props.remove(e)},t.prototype._onBrowseContainerClick=function(){this._fileInput&&this._fileInput.click()},t.prototype._onBrowseContainerKeyPress=function(e){!this._fileInput||13!==e.which&&32!==e.which||this._fileInput.click()},t.prototype._resolveFileInput=function(e){this._fileInput=e},t.prototype._onDragEnter=function(e){this._setDropEffect(e),e.preventDefault(),this.setState({isDragging:!0})},t.prototype._onDragLeave=function(e){e.preventDefault(),this.setState({isDragging:!1})},t.prototype._onDragOver=function(e){this._setDropEffect(e),e.preventDefault(),this.setState({isDragging:!0})},t.prototype._onDrop=function(e){this._setDropEffect(e),e.preventDefault(),this.setState({isDragging:!1});var t=e.dataTransfer.files;t&&t.length>0&&this.props.addFiles&&this.props.addFiles(t)},t.prototype._onFileInputChange=function(e){e.currentTarget.files&&e.currentTarget.files.length&&(this.props.addFiles&&this.props.addFiles(e.currentTarget.files),e.currentTarget.value="")},t.prototype._setDropEffect=function(e){try{e.dataTransfer.dropEffect="copy"}catch(e){}},tslib_1.__decorate([autobind],t.prototype,"_onClearClick",null),tslib_1.__decorate([autobind],t.prototype,"_onRemoveClick",null),tslib_1.__decorate([autobind],t.prototype,"_onBrowseContainerClick",null),tslib_1.__decorate([autobind],t.prototype,"_onBrowseContainerKeyPress",null),tslib_1.__decorate([autobind],t.prototype,"_resolveFileInput",null),tslib_1.__decorate([autobind],t.prototype,"_onDragEnter",null),tslib_1.__decorate([autobind],t.prototype,"_onDragLeave",null),tslib_1.__decorate([autobind],t.prototype,"_onDragOver",null),tslib_1.__decorate([autobind],t.prototype,"_onDrop",null),tslib_1.__decorate([autobind],t.prototype,"_onFileInputChange",null),t}(BaseComponent);
+function tryDetectFileEncoding(e){if(void 0===window.atob)return 0;for(var t=window.atob(e),r=[],s=0;s<4;s++)r.push(t.charCodeAt(s));if(254===r[0]&&255===r[1])return 6;if(255===r[0]&&254===r[1])return 0===r[2]&&0===r[3]?5:7;if(239===r[0]&&187===r[1]&&191===r[2])return 3;if(0===r[0]&&0===r[1]&&254===r[2]&&255===r[3])return 4;for(var i=!0,s=0,o=t.length;s<o;s++){var n=t.charCodeAt(s);if((n<=31||127==n)&&9!=n&&12!=n&&13!=n&&10!=n&&26!=n)return 1;n>127&&(i=!1)}return i?2:3}import*as tslib_1 from"tslib";import*as React from"react";import{autobind,BaseComponent,css,format}from"office-ui-fabric-react/lib/Utilities";import*as VSSUIResources from"../../Resources/VSS.Resources.VSSUI";import"./FileInput.css";var FileInput=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t._files=[],t}return tslib_1.__extends(t,e),t.prototype.render=function(){var e=this.props.maximumNumberOfFiles||0,t=this._files,r=this.state&&this.state.errorMessage?this.state.errorMessage:"",s=!e||t.length<e,i=null;if(this.props.allowedFileExtensions){i=this.props.allowedFileExtensions.map(function(e){return"."!==e[0]?"."+e:e}).join()}var o=1===e?VSSUIResources.FileInputDragDropSingleFileLabel:VSSUIResources.FileInputDragDropLabel,n=1!==e;return React.createElement(FileInputPure,{dragDropLabel:o,multiple:n,canAddMoreFiles:s,accept:i,files:t,errorMessage:r,addFiles:this._addFiles,remove:this._remove,clear:this._clear})},t.prototype._clear=function(){this._files.forEach(function(e){e.fileReader.readyState!==FileReader.DONE&&e.fileReader.abort()}),this._files=[],this.setState({files:this._files,errorMessage:""}),this._triggerUpdateEvent()},t.prototype._remove=function(e){this._files=this._files.filter(function(t){return t!==e}),this.setState({files:this._files}),this._triggerUpdateEvent()},t.prototype._addFiles=function(e){if(this.props.allowedFileExtensions&&this.props.allowedFileExtensions.length>0)for(o=0;o<e.length;o++){for(var t=e[o].name.split(".").pop(),r=!1,s=0;s<this.props.allowedFileExtensions.length;s++)if(t.toLocaleLowerCase()===this.props.allowedFileExtensions[s].toLocaleLowerCase()){r=!0;break}if(!r){c=format(VSSUIResources.FileInputErrorNotAllowedExtensionType,t,this.props.allowedFileExtensions.join());return void this.setState({errorMessage:c})}}for(var i={},o=0,n=this._files.length;o<n;o++)i[this.props.fileNamesCaseSensitive?this._files[o].result.name:this._files[o].result.name.toLowerCase()]=1;for(var a=this._getTotalFilesSize(),o=0,n=e.length;o<n;o++){if(this.props.maximumSingleFileSize&&e[o].size>this.props.maximumSingleFileSize){c=this._getLimitErrorMessage(format(VSSUIResources.FileInputErrorMaxFileSize,e[o].name,this._getFriendlySizeString(e[o].size),this._getFriendlySizeString(this.props.maximumSingleFileSize)),{fileSize:e[o].size});return void this.setState({errorMessage:c})}a+=e[o].size;var l=this.props.fileNamesCaseSensitive?e[o].name:e[o].name.toLowerCase();if(i[l]){c=format(VSSUIResources.FileInputErrorDuplicateFileName,e[o].name);return void this.setState({errorMessage:c})}i[l]=1}if(this.props.maximumTotalFileSize&&a>this.props.maximumTotalFileSize){c=this._getLimitErrorMessage(format(VSSUIResources.FileInputErrorTotalFileSize,this._getFriendlySizeString(a),this._getFriendlySizeString(this.props.maximumTotalFileSize)),{totalSize:a});this.setState({errorMessage:c})}else{var p=this._files.length+e.length;if(this.props.maximumNumberOfFiles&&p>this.props.maximumNumberOfFiles){var u=1===this.props.maximumNumberOfFiles?VSSUIResources.FileInputErrorSingleFileOnly:format(VSSUIResources.FileInputErrorMaxNumFiles,this.props.maximumNumberOfFiles),c=this._getLimitErrorMessage(u,{fileCount:p});this.setState({errorMessage:c})}else for(var o=0,n=e.length;o<n;o++)this._addFile(e[o])}},t.prototype._addFile=function(e){var t=this,r={name:e.name,size:e.size,type:e.type,lastModifiedDate:e.lastModifiedDate,statusText:VSSUIResources.Loading,isError:!1},s=new FileReader,i={result:r,fileReader:s};this._files.push(i);var o=function(){t.setState({files:t._files,errorMessage:t.state&&t.state.errorMessage?t.state.errorMessage:""}),t._triggerUpdateEvent()},n=function(){r.statusText=t._getFriendlySizeString(e.size),o()};s.onload=function(e){if(r.encoding=0,1===t.props.resultContentType)r.content=s.result||"";else{var i=s.result;i&&i.indexOf(",")>-1?(r.content=i.substr(i.indexOf(",")+1),"//"===r.content.substr(0,2)&&r.content.length%4==2&&(r.content=r.content.substr(2))):r.content="",t.props.detectEncoding&&(r.encoding=tryDetectFileEncoding(r.content))}n()},s.onerror=function(e){format(VSSUIResources.FileInputReadErrorFormat,r.name,e.message);r.statusText=VSSUIResources.FileInputErrorLabel,r.isError=!0,o()},s.onloadend=function(e){o()},1===this.props.resultContentType?s.readAsText(e):2===this.props.resultContentType?(r.encoding=0,r.file=e,n(),o()):s.readAsDataURL(e)},t.prototype._triggerUpdateEvent=function(){this.props.updateHandler&&this.props.updateHandler({loading:this._files.some(function(e){return e.fileReader.readyState!==FileReader.DONE}),files:this._files})},t.prototype._getTotalFilesSize=function(){for(var e=0,t=this._files,r=0,s=t.length;r<s;r++)e+=t[r].result.size;return e},t.prototype._getLimitErrorMessage=function(e,t){var r=e;return this.props.limitMessageFormatter&&(r=this.props.limitMessageFormatter(e,t)),r},t.prototype._getFriendlySizeString=function(e,t){void 0===t&&(t=1);Math.pow(10,t);return e<1024?format(VSSUIResources.FileSizeBytesFormat,e):e<1048576?format(VSSUIResources.FileSizeKBFormat,Math.round(e/1024*10)/10):format(VSSUIResources.FileSizeMBFormat,Math.round(e/1048576*10)/10)},tslib_1.__decorate([autobind],t.prototype,"_clear",null),tslib_1.__decorate([autobind],t.prototype,"_remove",null),tslib_1.__decorate([autobind],t.prototype,"_addFiles",null),t}(BaseComponent);export{FileInput};var FileInputPure=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return tslib_1.__extends(t,e),t.prototype.render=function(){var e=this,t=css("vss-FileInput-filesDropTarget",this.state.isDragging?this.props.dragOverCssClass||"vss-FileInput-dragOver":"");return React.createElement("div",{className:"vss-FileInput"},this.props.canAddMoreFiles&&React.createElement("div",{className:t,onDragOver:this._onDragOver,onDragLeave:this._onDragLeave,onDragEnter:this._onDragEnter,onDrop:this._onDrop},React.createElement("div",{className:"vss-FileInput-dragDropTable",role:"presentation"},React.createElement("div",{className:"vss-FileInput-dragDropLabel"},React.createElement("span",null,this.props.dragDropLabel)),React.createElement("div",{className:"vss-FileInput-browseButton"},React.createElement("button",{className:"vss-FileInput-browseContainer",onKeyPress:this._onBrowseContainerKeyPress,onClick:this._onBrowseContainerClick},VSSUIResources.FileInputBrowseButtonLabel),React.createElement("input",{type:"file",ref:this._resolveFileInput,onChange:this._onFileInputChange,accept:this.props.accept,multiple:this.props.multiple,style:{display:"none"}})))),this.props.files.length>1&&React.createElement("div",{className:"vss-FileInput-overallStatusContainer"},React.createElement("span",{className:"vss-FileInput-overallStatusActions"},React.createElement("a",{onClick:this._onClearClick},VSSUIResources.FileInputRemoveAll))),React.createElement("div",{className:"vss-FileInput-errorContainer"},this.props.errorMessage),this.props.files.length>0&&React.createElement("ul",{className:"vss-FileInput-fileList",style:{display:"block"}},this.props.files.map(function(t){return React.createElement("li",{key:t.result.name},React.createElement("div",{className:"vss-FileInput-headerContainer"},React.createElement("span",{className:"vss-FileInput-fileName"},t.result.name)),React.createElement("div",{className:"vss-FileInput-detailsContainer"},React.createElement("span",{className:"vss-FileInput-status"},t.result.statusText),React.createElement("span",{className:"vss-FileInput-links"},React.createElement("a",{onClick:function(){return e._onRemoveClick(t)},role:"button"},VSSUIResources.FileInputRemoveFile))))})))},t.prototype.componentWillMount=function(){this.setState({isDragging:!1})},t.prototype._onClearClick=function(){this.props.clear&&this.props.clear()},t.prototype._onRemoveClick=function(e){this.props.remove&&this.props.remove(e)},t.prototype._onBrowseContainerClick=function(){this._fileInput&&this._fileInput.click()},t.prototype._onBrowseContainerKeyPress=function(e){!this._fileInput||13!==e.which&&32!==e.which||this._fileInput.click()},t.prototype._resolveFileInput=function(e){this._fileInput=e},t.prototype._onDragEnter=function(e){this._setDropEffect(e),e.preventDefault(),this.setState({isDragging:!0})},t.prototype._onDragLeave=function(e){e.preventDefault(),this.setState({isDragging:!1})},t.prototype._onDragOver=function(e){this._setDropEffect(e),e.preventDefault(),this.setState({isDragging:!0})},t.prototype._onDrop=function(e){this._setDropEffect(e),e.preventDefault(),this.setState({isDragging:!1});var t=e.dataTransfer.files;t&&t.length>0&&this.props.addFiles&&this.props.addFiles(t)},t.prototype._onFileInputChange=function(e){e.currentTarget.files&&e.currentTarget.files.length&&(this.props.addFiles&&this.props.addFiles(e.currentTarget.files),e.currentTarget.value="")},t.prototype._setDropEffect=function(e){try{e.dataTransfer.dropEffect="copy"}catch(e){}},tslib_1.__decorate([autobind],t.prototype,"_onClearClick",null),tslib_1.__decorate([autobind],t.prototype,"_onRemoveClick",null),tslib_1.__decorate([autobind],t.prototype,"_onBrowseContainerClick",null),tslib_1.__decorate([autobind],t.prototype,"_onBrowseContainerKeyPress",null),tslib_1.__decorate([autobind],t.prototype,"_resolveFileInput",null),tslib_1.__decorate([autobind],t.prototype,"_onDragEnter",null),tslib_1.__decorate([autobind],t.prototype,"_onDragLeave",null),tslib_1.__decorate([autobind],t.prototype,"_onDragOver",null),tslib_1.__decorate([autobind],t.prototype,"_onDrop",null),tslib_1.__decorate([autobind],t.prototype,"_onFileInputChange",null),t}(BaseComponent);

Components/Hub/Hub.js

@@ -1,1 +0,1 @@
-import*as tslib_1 from"tslib";import*as React from"react";import*as VSSUIResources from"../../Resources/VSS.Resources.VSSUI";import{autobind,BaseComponent,css}from"office-ui-fabric-react/lib/Utilities";import{childrenOfType}from"../../Utilities/ChildrenUtils";import{HubViewOptionKeys}from"../../Utilities/HubViewState";import{ObservableLike}from"../../Utilities/Observable";import{VIEW_OPTIONS_CHANGE_EVENT}from"../../Utilities/ViewOptions";import{Fabric}from"office-ui-fabric-react/lib/Fabric";import{PivotBar,PivotBarViewActionType}from"../../PivotBar";import{HubHeader}from"../../HubHeader";import"./Hub.css";var Hub=function(e){function t(t){var i=e.call(this,t)||this;return i.state={viewActions:i._getViewActions(t),selectedPivot:i.props.hubViewState.selectedPivot.value,inFullScreenMode:i.props.hubViewState.viewOptions.getViewOption(HubViewOptionKeys.fullScreen)},i}return tslib_1.__extends(t,e),t.prototype.focus=function(e){switch(e){case 0:this._pivotBar&&this._pivotBar.focus(e)}},t.prototype.componentWillReceiveProps=function(e){this.props.viewActions!==e.viewActions&&this.setState({viewActions:this._getViewActions(e)})},t.prototype.componentDidMount=function(){this.props.hubViewState.selectedPivot.subscribe(this._onSelectedPivotChanged),this._events.on(this.props.hubViewState.viewOptions,VIEW_OPTIONS_CHANGE_EVENT,this._onViewOptionChanged)},t.prototype.componentWillUnmount=function(){this.props.hubViewState.selectedPivot.unsubscribe(this._onSelectedPivotChanged),this._events.off(this.props.hubViewState.viewOptions,VIEW_OPTIONS_CHANGE_EVENT,this._onViewOptionChanged)},t.prototype.render=function(){var e=this,t=React.Children.toArray(this.props.children);this.validateChildren(t);var i=this.props,o=i.className,n=i.commands,r=i.hideHeader,s=i.hubViewState,c=i.onRenderFilterBar,a=i.pivotProviders,l=i.onPivotBarRenderComplete,p=i.showFilterBarInline,u=i.useShadowStyle,d=this.state,h=d.selectedPivot,v=d.viewActions,b=d.inFullScreenMode,f={onPivotClicked:this._onPivotClicked,commands:n,selectedPivot:h,viewOptions:s.viewOptions,filter:s.filter,pivotProviders:a,showPivots:!b&&void 0,onRenderComplete:l,viewActions:v,onRenderFilterBar:c,showFilterBarInline:p,showFilterBarViewOptionKey:HubViewOptionKeys.showFilterBar,filterBarClassName:"vss-Hub--filterBar"};return React.createElement(Fabric,{className:css("vss-Hub",o)},React.createElement(PivotBar,tslib_1.__assign({},f,{className:css("vss-HubPivotBar",{shadowStyle:u,hideHeader:r}),componentRef:function(t){e._pivotBar=t}}),t))},t.prototype.validateChildren=function(e){var t=childrenOfType(e,HubHeader)[0];if(!t||0!==t.index)throw new Error("Expected first child of Hub to be HubHeader.");this.state.inFullScreenMode&&(e[t.index]=React.cloneElement(e[t.index],{collapseBreadcrumb:!0}))},t.prototype._getFullScreenViewAction=function(){return{key:HubViewOptionKeys.fullScreen,important:!0,actionType:PivotBarViewActionType.OnOff,actionProps:{showText:!1,onAriaLabel:VSSUIResources.ExitFullScreenAriaLabel,offAriaLabel:VSSUIResources.EnterFullScreenAriaLabel,onIconProps:{iconName:"BackToWindow"},offIconProps:{iconName:"FullScreen"}}}},t.prototype._getViewActions=function(e){if(ObservableLike.isObservable(e.viewActions))return e.hideFullScreenToggle||e.viewActions.push(this._getFullScreenViewAction()),e.viewActions;var t=e.viewActions||[];return e.hideFullScreenToggle||t.push(this._getFullScreenViewAction()),t},t.prototype._onViewOptionChanged=function(e){if(HubViewOptionKeys.fullScreen in e){var t=!0===e[HubViewOptionKeys.fullScreen];this.setState({inFullScreenMode:t})}},t.prototype._onSelectedPivotChanged=function(e){this.setState({selectedPivot:e})},t.prototype._onPivotClicked=function(e,t){t!==this.props.hubViewState.selectedPivot.value&&(this.props.hubViewState.selectedPivot.value=t)},tslib_1.__decorate([autobind],t.prototype,"_onSelectedPivotChanged",null),tslib_1.__decorate([autobind],t.prototype,"_onPivotClicked",null),t}(BaseComponent);export{Hub};
+import*as tslib_1 from"tslib";import*as React from"react";import*as VSSUIResources from"../../Resources/VSS.Resources.VSSUI";import{autobind,BaseComponent,css}from"office-ui-fabric-react/lib/Utilities";import{childrenOfType}from"../../Utilities/ChildrenUtils";import{HubViewOptionKeys}from"../../Utilities/HubViewState";import{ObservableLike}from"../../Utilities/Observable";import{VIEW_OPTIONS_CHANGE_EVENT}from"../../Utilities/ViewOptions";import{Fabric}from"office-ui-fabric-react/lib/Fabric";import{PivotBar}from"../../PivotBar";import{HubHeader}from"../../HubHeader";import"./Hub.css";var Hub=function(e){function t(t){var i=e.call(this,t)||this;return i.state={viewActions:i._getViewActions(t),selectedPivot:i.props.hubViewState.selectedPivot.value,inFullScreenMode:i.props.hubViewState.viewOptions.getViewOption(HubViewOptionKeys.fullScreen)},i}return tslib_1.__extends(t,e),t.prototype.focus=function(e){switch(e){case 0:this._pivotBar&&this._pivotBar.focus(e)}},t.prototype.componentWillReceiveProps=function(e){this.props.viewActions!==e.viewActions&&this.setState({viewActions:this._getViewActions(e)})},t.prototype.componentDidMount=function(){this.props.hubViewState.selectedPivot.subscribe(this._onSelectedPivotChanged),this._events.on(this.props.hubViewState.viewOptions,VIEW_OPTIONS_CHANGE_EVENT,this._onViewOptionChanged)},t.prototype.componentWillUnmount=function(){this.props.hubViewState.selectedPivot.unsubscribe(this._onSelectedPivotChanged),this._events.off(this.props.hubViewState.viewOptions,VIEW_OPTIONS_CHANGE_EVENT,this._onViewOptionChanged)},t.prototype.render=function(){var e=this,t=React.Children.toArray(this.props.children);this.validateChildren(t);var i=this.props,o=i.className,n=i.commands,r=i.hideHeader,s=i.hubViewState,c=i.onRenderFilterBar,l=i.pivotProviders,a=i.onPivotBarRenderComplete,p=i.showFilterBarInline,u=i.useShadowStyle,d=i.pivotRenderingModeOptions,h=this.state,v=h.selectedPivot,b=h.viewActions,f=h.inFullScreenMode,w={onPivotClicked:this._onPivotClicked,commands:n,selectedPivot:v,viewOptions:s.viewOptions,filter:s.filter,pivotProviders:l,showPivots:!f&&void 0,onRenderComplete:a,viewActions:b,onRenderFilterBar:c,showFilterBarInline:p,showFilterBarViewOptionKey:HubViewOptionKeys.showFilterBar,filterBarClassName:"vss-Hub--filterBar",pivotRenderingModeOptions:d};return React.createElement(Fabric,{className:css("vss-Hub",o)},React.createElement(PivotBar,tslib_1.__assign({},w,{className:css("vss-HubPivotBar",{shadowStyle:u,hideHeader:r}),componentRef:function(t){e._pivotBar=t}}),t))},t.prototype.validateChildren=function(e){var t=childrenOfType(e,HubHeader)[0];if(!t||0!==t.index)throw new Error("Expected first child of Hub to be HubHeader.");this.state.inFullScreenMode&&(e[t.index]=React.cloneElement(e[t.index],{collapseBreadcrumb:!0}))},t.prototype._getFullScreenViewAction=function(){return{key:HubViewOptionKeys.fullScreen,important:!0,actionType:1,actionProps:{showText:!1,onAriaLabel:VSSUIResources.ExitFullScreenAriaLabel,offAriaLabel:VSSUIResources.EnterFullScreenAriaLabel,onIconProps:{iconName:"BackToWindow"},offIconProps:{iconName:"FullScreen"}}}},t.prototype._getViewActions=function(e){if(ObservableLike.isObservable(e.viewActions))return e.hideFullScreenToggle||e.viewActions.push(this._getFullScreenViewAction()),e.viewActions;var t=e.viewActions||[];return e.hideFullScreenToggle||t.push(this._getFullScreenViewAction()),t},t.prototype._onViewOptionChanged=function(e){if(HubViewOptionKeys.fullScreen in e){var t=!0===e[HubViewOptionKeys.fullScreen];this.setState({inFullScreenMode:t})}},t.prototype._onSelectedPivotChanged=function(e){this.setState({selectedPivot:e})},t.prototype._onPivotClicked=function(e,t){t!==this.props.hubViewState.selectedPivot.value&&(this.props.hubViewState.selectedPivot.value=t)},tslib_1.__decorate([autobind],t.prototype,"_onSelectedPivotChanged",null),tslib_1.__decorate([autobind],t.prototype,"_onPivotClicked",null),t}(BaseComponent);export{Hub};

Components/HubHeader/HubBreadcrumb.d.ts

 /// <reference types="react" />
 import { BaseComponent } from "office-ui-fabric-react/lib/Utilities";
-import { IHubBreadcrumbProps, IHubPickerDropdownProps } from "../../Components/HubHeader/HubBreadcrumb.Props";
+import { IHubBreadcrumb, IHubBreadcrumbPickList, IHubBreadcrumbProps, IHubPickerDropdownProps } from "../../Components/HubHeader/HubBreadcrumb.Props";
 import "./HubBreadcrumb.css";
-export declare const HEADER_PICKER_CHANGE_EVENT = "header-picker-changed";
+export declare const HEADER_PICKER_CHANGE_EVENT = "picker-changed";
 /**
@@ -14,3 +14,3 @@ *
 }
-export declare class PickerDropdown extends BaseComponent<IHubPickerDropdownProps, IPickerDropdownState> {
+export declare class PickerDropdown extends BaseComponent<IHubPickerDropdownProps, IPickerDropdownState> implements IHubBreadcrumbPickList {
     private dropdownPinElement;
@@ -24,8 +24,10 @@ private _pickList;
     componentWillReceiveProps(nextProps: IHubPickerDropdownProps): void;
-    private onDropdownIsVisibleChanged(value);
+    openDropdown(): void;
+    closeDropdown(): void;
     private onPositioned();
     private onDismiss();
 }
-export declare class HubBreadcrumb extends BaseComponent<IHubBreadcrumbProps, {}> {
+export declare class HubBreadcrumb extends BaseComponent<IHubBreadcrumbProps, {}> implements IHubBreadcrumb {
     private pinElements;
+    pickList: IHubBreadcrumbPickList;
     private getIcon(iconProps);
@@ -32,0 +34,0 @@ private onRenderItem(item, defaultRenderer);

Components/HubHeader/HubBreadcrumb.js

@@ -1,1 +0,1 @@
-import*as tslib_1 from"tslib";import*as React from"react";import{Breadcrumb}from"office-ui-fabric-react/lib/Breadcrumb";import{Callout}from"office-ui-fabric-react/lib/Callout";import{Link}from"office-ui-fabric-react/lib/Link";import{autobind,BaseComponent,css}from"office-ui-fabric-react/lib/Utilities";import{VssIcon,VssIconType}from"../../VssIcon";import{PickList}from"../../PickList";import*as VSSUIResources from"../../Resources/VSS.Resources.VSSUI";import"./HubBreadcrumb.css";export var HEADER_PICKER_CHANGE_EVENT="header-picker-changed";export function getDropdownIcon(e){};var PickerDropdown=function(e){function t(t){var i=e.call(this,t)||this;return i.updateDelegate=function(){return i.forceUpdate()},i.state={calloutIsVisible:!1},i}return tslib_1.__extends(t,e),t.prototype.render=function(){var e=this,t=this.props,i=t.getPinElement,s=t.item,r=t.minWidth;if(this.state.calloutIsVisible){var o=s.headerItemPicker;return React.createElement(Callout,{isBeakVisible:!1,target:i(),onPositioned:this.onPositioned,onDismiss:this.onDismiss},React.createElement(PickList,{componentRef:function(t){return e._pickList=t},className:"picker-dropdown",items:o.getItems(),getListItem:o.getListItem,onSelectionChanged:s.onSelectionChanged,initiallySelectedItems:o.selectedItem?[o.selectedItem]:void 0,indicators:o.indicator?[o.indicator]:void 0,isSearchable:o.isSearchable,searchTextPlaceholder:o.searchTextPlaceholder,searchResultsGroupName:o.searchResultsGroupName,searchNoResultsText:o.searchNoResultsText,onSearch:o.onSearch,getActions:function(e){return o.actions},noItemsText:o.noItemsText,width:r,shouldVirtualize:function(e){return(e||[]).length>50}}))}return null},t.prototype.componentDidMount=function(){this.props.item.headerItemPicker.isDropdownVisible.subscribe(this.onDropdownIsVisibleChanged),this._events.on(this.props.item.headerItemPicker,HEADER_PICKER_CHANGE_EVENT,this.updateDelegate)},t.prototype.componentWillUnmount=function(){this.props.item.headerItemPicker.isDropdownVisible.unsubscribe(this.onDropdownIsVisibleChanged),this._events.off(this.props.item.headerItemPicker,HEADER_PICKER_CHANGE_EVENT,this.updateDelegate)},t.prototype.componentWillReceiveProps=function(e){this.props.item.headerItemPicker!==e.item.headerItemPicker&&(this.props.item.headerItemPicker.isDropdownVisible.unsubscribe(this.onDropdownIsVisibleChanged),this._events.off(this.props.item.headerItemPicker,HEADER_PICKER_CHANGE_EVENT,this.updateDelegate),e.item.headerItemPicker.isDropdownVisible.subscribe(this.onDropdownIsVisibleChanged),this._events.on(e.item.headerItemPicker,HEADER_PICKER_CHANGE_EVENT,this.updateDelegate))},t.prototype.onDropdownIsVisibleChanged=function(e){this.setState({calloutIsVisible:e})},t.prototype.onPositioned=function(){this._pickList.focus()},t.prototype.onDismiss=function(){this.props.item.headerItemPicker.isDropdownVisible.value=!1},tslib_1.__decorate([autobind],t.prototype,"onDropdownIsVisibleChanged",null),tslib_1.__decorate([autobind],t.prototype,"onPositioned",null),tslib_1.__decorate([autobind],t.prototype,"onDismiss",null),t}(BaseComponent);export{PickerDropdown};var HubBreadcrumb=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.pinElements={},t}return tslib_1.__extends(t,e),t.prototype.getIcon=function(e){return e?React.createElement(VssIcon,tslib_1.__assign({className:"vss-HubBreadcrumb--item-leftIcon"},e)):null},t.prototype.onRenderItem=function(e,t){var i=this,s=tslib_1.__assign({},e);delete s.onClick,delete s.href;var r=this.getIcon(e.leftIconProps),o=t(s),n=o.props&&o.props.className,a=tslib_1.__assign({},o.props,{className:n?n+" vss-HubBreadcrumb--itemText":"vss-HubBreadcrumb--itemText",style:o.props.style?tslib_1.__assign({},o.props.style):{}});this.props.maxItemWidth&&(a.style.maxWidth=this.props.maxItemWidth);var c=React.cloneElement(o,a),m=e.headerItemPicker&&!!e.onClick;if(e.headerItemPicker){var l=null;return m&&(l=React.createElement(VssIcon,{iconName:"ChevronDown",iconType:VssIconType.fabric,key:"RightIcon$"+e.key,className:css("vss-HubBreadcrumb--item-dropdown")})),React.createElement("div",{ref:function(t){i.pinElements[e.key]=t},className:css({"vss-HubBreadcrumb--item":!0,"no-click":!e.onClick})},React.createElement(Link,{key:"BreadcrumbItem$"+e.key,onClick:e.onClick,href:e.href},React.createElement("div",{className:"vss-HubBreadcrumb--itemContainer"},r,c,l)))}return e.onClick||e.href?React.createElement("div",{className:css("vss-HubBreadcrumb--item")},React.createElement(Link,{key:"BreadcrumbItem$"+e.key,onClick:e.onClick,href:e.href},React.createElement("div",{className:"vss-HubBreadcrumb--itemContainer"},r,c))):React.createElement("div",{className:css("vss-HubBreadcrumb--item")},r,c)},t.prototype.render=function(){for(var e,t=this,i=this.props.items,s=0,r=i;s<r.length;s++){var o=r[s];o.headerItemPicker&&(e=o)}return React.createElement("div",{className:"vss-HubBreadcrumb--container"},React.createElement(Breadcrumb,{onReduceData:function(e){},maxDisplayedItems:4,items:i,className:css("vss-HubBreadcrumb"),onRenderItem:this.onRenderItem,ariaLabel:VSSUIResources.BreadcrumbAriaLabel}),e&&React.createElement(PickerDropdown,{item:e,getPinElement:function(){return t.pinElements[e.key]},minWidth:this.pinElements[e.key]&&this.pinElements[e.key].clientWidth}))},tslib_1.__decorate([autobind],t.prototype,"onRenderItem",null),t}(BaseComponent);export{HubBreadcrumb};
+import*as tslib_1 from"tslib";import*as React from"react";import{Breadcrumb}from"office-ui-fabric-react/lib/Breadcrumb";import{Callout}from"office-ui-fabric-react/lib/Callout";import{Link}from"office-ui-fabric-react/lib/Link";import{autobind,BaseComponent,css}from"office-ui-fabric-react/lib/Utilities";import{VssIcon}from"../../VssIcon";import{PickList,PICKER_CHANGE_EVENT}from"../../PickList";import*as VSSUIResources from"../../Resources/VSS.Resources.VSSUI";import"./HubBreadcrumb.css";export var HEADER_PICKER_CHANGE_EVENT=PICKER_CHANGE_EVENT;export function getDropdownIcon(e){};var PickerDropdown=function(e){function t(t){var i=e.call(this,t)||this;return i.updateDelegate=function(){return i.forceUpdate()},i.state={calloutIsVisible:!1},i}return tslib_1.__extends(t,e),t.prototype.render=function(){var e=this,t=this.props,i=t.getPinElement,s=t.item,r=t.minWidth,o=t.pickListClassName;if(this.state.calloutIsVisible){var n=s.headerItemPicker;return React.createElement(Callout,{isBeakVisible:!1,target:i(),onPositioned:this.onPositioned,onDismiss:this.onDismiss},React.createElement(PickList,{componentRef:function(t){return e._pickList=t},className:css("picker-dropdown",o),items:n.getItems(),getListItem:n.getListItem,onSelectionChanged:s.onSelectionChanged,initiallySelectedItems:n.selectedItem?[n.selectedItem]:void 0,indicators:n.dropdownIndicators,groups:n.groups,isSearchable:n.isSearchable,searchTextPlaceholder:n.searchTextPlaceholder,searchResultsGroupName:n.searchResultsGroupName,searchNoResultsText:n.searchNoResultsText,onSearch:n.onSearch,getActions:function(e){return n.actions},noItemsText:n.noItemsText,width:r,shouldVirtualize:function(e){return(e||[]).length>50}}))}return null},t.prototype.componentDidMount=function(){this._events.on(this.props.item.headerItemPicker,HEADER_PICKER_CHANGE_EVENT,this.updateDelegate)},t.prototype.componentWillUnmount=function(){this._events.off(this.props.item.headerItemPicker,HEADER_PICKER_CHANGE_EVENT,this.updateDelegate)},t.prototype.componentWillReceiveProps=function(e){this.props.item.headerItemPicker!==e.item.headerItemPicker&&(this._events.off(this.props.item.headerItemPicker,HEADER_PICKER_CHANGE_EVENT,this.updateDelegate),this._events.on(e.item.headerItemPicker,HEADER_PICKER_CHANGE_EVENT,this.updateDelegate))},t.prototype.openDropdown=function(){this.setState({calloutIsVisible:!0})},t.prototype.closeDropdown=function(){this.setState({calloutIsVisible:!1})},t.prototype.onPositioned=function(){this._pickList.focus()},t.prototype.onDismiss=function(){this.closeDropdown()},tslib_1.__decorate([autobind],t.prototype,"onPositioned",null),tslib_1.__decorate([autobind],t.prototype,"onDismiss",null),t}(BaseComponent);export{PickerDropdown};var HubBreadcrumb=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.pinElements={},t}return tslib_1.__extends(t,e),t.prototype.getIcon=function(e){return e?React.createElement(VssIcon,tslib_1.__assign({className:"vss-HubBreadcrumb--item-leftIcon"},e)):null},t.prototype.onRenderItem=function(e,t){var i=this,s=tslib_1.__assign({},e);delete s.onClick,delete s.href;var r=this.getIcon(e.leftIconProps),o=t(s),n=o.props&&o.props.className,c=tslib_1.__assign({},o.props,{className:n?n+" vss-HubBreadcrumb--itemText":"vss-HubBreadcrumb--itemText",style:o.props.style?tslib_1.__assign({},o.props.style):{}});this.props.maxItemWidth&&(c.style.maxWidth=this.props.maxItemWidth);var a=React.cloneElement(o,c),m=e.headerItemPicker&&!!e.onClick;if(e.headerItemPicker){var l=null;return m&&(l=React.createElement(VssIcon,{iconName:"ChevronDown",iconType:0,key:"RightIcon$"+e.key,className:css("vss-HubBreadcrumb--item-dropdown")})),React.createElement("div",{ref:function(t){i.pinElements[e.key]=t},className:css({"vss-HubBreadcrumb--item":!0,"no-click":!e.onClick})},React.createElement(Link,{key:"BreadcrumbItem$"+e.key,onClick:e.onClick,href:e.href},React.createElement("div",{className:"vss-HubBreadcrumb--itemContainer"},r,a,l)))}return e.onClick||e.href?React.createElement("div",{className:css("vss-HubBreadcrumb--item")},React.createElement(Link,{key:"BreadcrumbItem$"+e.key,onClick:e.onClick,href:e.href},React.createElement("div",{className:"vss-HubBreadcrumb--itemContainer"},r,a))):React.createElement("div",{className:css("vss-HubBreadcrumb--item")},r,a)},t.prototype.render=function(){for(var e,t=this,i=this.props,s=i.items,r=i.pickListClassName,o=0,n=s;o<n.length;o++){var c=n[o];c.headerItemPicker&&(e=c)}return React.createElement("div",{className:"vss-HubBreadcrumb--container"},React.createElement(Breadcrumb,{onReduceData:function(e){},maxDisplayedItems:4,items:s,className:css("vss-HubBreadcrumb"),onRenderItem:this.onRenderItem,ariaLabel:VSSUIResources.BreadcrumbAriaLabel}),e&&React.createElement(PickerDropdown,{ref:function(e){t.pickList=e},item:e,getPinElement:function(){return t.pinElements[e.key]},minWidth:this.pinElements[e.key]&&this.pinElements[e.key].clientWidth,pickListClassName:r}))},tslib_1.__decorate([autobind],t.prototype,"onRenderItem",null),t}(BaseComponent);export{HubBreadcrumb};

Components/HubHeader/HubHeader.d.ts

 /// <reference types="react" />
 import { BaseComponent } from "office-ui-fabric-react/lib/Utilities";
-import { IHeaderItemPicker } from "../../Components/HubHeader/HubBreadcrumb.Props";
 import { IHubHeaderProps } from "../../Components/HubHeader/HubHeader.Props";
+import { IItemPickerProvider } from "../../PickList";
 import "./HubHeader.css";
 export interface IHubHeaderState {
-    headerItemPicker?: IHeaderItemPicker;
+    headerItemPicker?: IItemPickerProvider;
 }
@@ -13,2 +13,3 @@ /**
 export declare class HubHeader extends BaseComponent<IHubHeaderProps, IHubHeaderState> {
+    private _hubBreadcrumb;
     constructor(props: IHubHeaderProps);
@@ -23,7 +24,7 @@ componentWillMount(): void;
     private getBreadcrumb();
-    private onClick();
+    private onHeaderItemClick();
     private onSelectionChanged(selection);
     private onHeaderPickerChanged(headerItemPicker);
-    private getIndicator();
+    private getIndicators();
     render(): JSX.Element;
 }

Components/HubHeader/HubHeader.js

@@ -1,1 +0,1 @@
-import*as tslib_1 from"tslib";import*as React from"react";import{autobind,BaseComponent,css}from"office-ui-fabric-react/lib/Utilities";import{HubBreadcrumb}from"../../Components/HubHeader/HubBreadcrumb";import{HubTitle}from"../../Components/HubHeader/HubTitle";import{ItemIndicator}from"../../ItemIndicator";import{ObservableLike}from"../../Utilities/Observable";import"./HubHeader.css";var MAX_BREADCRUMB_WIDTH="340px",HubHeader=function(e){function t(t){var r=e.call(this,t)||this;return r.state={headerItemPicker:ObservableLike.getValue(r.props.headerItemPicker)},r}return tslib_1.__extends(t,e),t.prototype.componentWillMount=function(){ObservableLike.subscribe(this.props.headerItemPicker,this.onHeaderPickerChanged)},t.prototype.componentWillUnmount=function(){ObservableLike.unsubscribe(this.props.headerItemPicker,this.onHeaderPickerChanged)},t.prototype.componentWillReceiveProps=function(e){this.props.headerItemPicker!==e.headerItemPicker&&(this.setState({headerItemPicker:ObservableLike.getValue(e.headerItemPicker)}),ObservableLike.unsubscribe(this.props.headerItemPicker,this.onHeaderPickerChanged),ObservableLike.subscribe(e.headerItemPicker,this.onHeaderPickerChanged))},t.prototype.getTitle=function(){return this.props.breadcrumbItems&&this.props.breadcrumbItems.length>0||this.props.headerItemPicker?this.getBreadcrumb():this.props.title?React.createElement(HubTitle,{titleText:this.props.title,iconProps:this.props.iconProps}):(console.log("Must use title or breadcrumb items + headerItemPicker"),null)},t.prototype.getBreadcrumb=function(){var e=this.props.breadcrumbItems?this.props.breadcrumbItems.slice():[],t=this.props,r=t.maxBreadcrumbItemWidth,i=t.collapseBreadcrumb,o=t.nonInteractive,s=t.iconProps,n=t.title,a=this.state.headerItemPicker;if(a&&a.getListItem){var c=a.getListItem(a.selectedItem),l=a.getTitleTextForItem?a.getTitleTextForItem(a.selectedItem):c&&c.name,m=o?void 0:this.onClick,d={key:"title-item",text:n||l,leftIconProps:s,onClick:m,onSelectionChanged:this.onSelectionChanged,headerItemPicker:a};e.push(d)}else if(n){d={key:"title-item",text:n,leftIconProps:s};e.push(d)}return i&&(e=e.slice(e.length-1)),React.createElement(HubBreadcrumb,{items:e,maxItemWidth:"string"==typeof r?r:MAX_BREADCRUMB_WIDTH})},t.prototype.onClick=function(){this.state.headerItemPicker.isDropdownVisible.value=!0},t.prototype.onSelectionChanged=function(e){var t=this.state.headerItemPicker;t&&t.onSelectedItemChanged&&(t.onSelectedItemChanged(e.selectedItems&&e.selectedItems.length>0?e.selectedItems[0]:null),t.isDropdownVisible.value=!1)},t.prototype.onHeaderPickerChanged=function(e){this.setState({headerItemPicker:e})},t.prototype.getIndicator=function(){var e=this.state.headerItemPicker;return e&&e.indicator&&e.selectedItem?React.createElement(ItemIndicator,tslib_1.__assign({},e.indicator.getItemIndicator(e.selectedItem))):null},t.prototype.render=function(){return React.createElement("div",{className:css("vss-HubHeader")},this.getTitle(),this.getIndicator(),this.props.children)},tslib_1.__decorate([autobind],t.prototype,"onClick",null),tslib_1.__decorate([autobind],t.prototype,"onSelectionChanged",null),tslib_1.__decorate([autobind],t.prototype,"onHeaderPickerChanged",null),t}(BaseComponent);export{HubHeader};
+import*as tslib_1 from"tslib";import*as React from"react";import{autobind,BaseComponent,css}from"office-ui-fabric-react/lib/Utilities";import{HubBreadcrumb}from"../../Components/HubHeader/HubBreadcrumb";import{HubTitle}from"../../Components/HubHeader/HubTitle";import{ItemIndicatorSet}from"../../ItemIndicator";import{ObservableLike}from"../../Utilities/Observable";import"./HubHeader.css";var MAX_BREADCRUMB_WIDTH="340px",HubHeader=function(e){function t(t){var r=e.call(this,t)||this;return r.state={headerItemPicker:ObservableLike.getValue(r.props.headerItemPicker)},r}return tslib_1.__extends(t,e),t.prototype.componentWillMount=function(){ObservableLike.subscribe(this.props.headerItemPicker,this.onHeaderPickerChanged)},t.prototype.componentWillUnmount=function(){ObservableLike.unsubscribe(this.props.headerItemPicker,this.onHeaderPickerChanged)},t.prototype.componentWillReceiveProps=function(e){this.props.headerItemPicker!==e.headerItemPicker&&(this.setState({headerItemPicker:ObservableLike.getValue(e.headerItemPicker)}),ObservableLike.unsubscribe(this.props.headerItemPicker,this.onHeaderPickerChanged),ObservableLike.subscribe(e.headerItemPicker,this.onHeaderPickerChanged))},t.prototype.getTitle=function(){return this.props.breadcrumbItems&&this.props.breadcrumbItems.length>0||this.props.headerItemPicker?this.getBreadcrumb():this.props.title?React.createElement(HubTitle,{titleText:this.props.title,iconProps:this.props.iconProps}):(console.log("Must use title or breadcrumb items + headerItemPicker"),null)},t.prototype.getBreadcrumb=function(){var e=this,t=this.props.breadcrumbItems?this.props.breadcrumbItems.slice():[],r=this.props,i=r.maxBreadcrumbItemWidth,s=r.collapseBreadcrumb,o=r.nonInteractive,c=r.iconProps,n=r.pickListClassName,a=r.title,m=this.state.headerItemPicker;if(m&&m.getListItem){var d=m.getListItem(m.selectedItem),l=m.getTitleTextForItem?m.getTitleTextForItem(m.selectedItem):d&&d.name,p=o?void 0:this.onHeaderItemClick,u={key:"title-item",text:a||l,leftIconProps:c,onClick:p,onSelectionChanged:this.onSelectionChanged,headerItemPicker:m};t.push(u)}else if(a){u={key:"title-item",text:a,leftIconProps:c};t.push(u)}return s&&(t=t.slice(t.length-1)),React.createElement(HubBreadcrumb,{ref:function(t){e._hubBreadcrumb=t},items:t,maxItemWidth:"string"==typeof i?i:MAX_BREADCRUMB_WIDTH,pickListClassName:n})},t.prototype.onHeaderItemClick=function(){this._hubBreadcrumb&&this._hubBreadcrumb.pickList&&this._hubBreadcrumb.pickList.openDropdown()},t.prototype.onSelectionChanged=function(e){var t=this.state.headerItemPicker,r=!1;return t&&t.onSelectedItemChanged&&(r=!0===t.onSelectedItemChanged(e.selectedItems&&e.selectedItems.length>0?e.selectedItems[0]:null),this._hubBreadcrumb&&this._hubBreadcrumb.pickList&&this._hubBreadcrumb.pickList.closeDropdown()),r},t.prototype.onHeaderPickerChanged=function(e){this.setState({headerItemPicker:e})},t.prototype.getIndicators=function(){var e=this.state.headerItemPicker;return e&&e.selectedItem&&e.selectedItemIndicators&&e.selectedItemIndicators.length?React.createElement(ItemIndicatorSet,{indicators:e.selectedItemIndicators.map(function(t){return t.getItemIndicator(e.selectedItem)})}):null},t.prototype.render=function(){return React.createElement("div",{className:css("vss-HubHeader")},this.getTitle(),this.getIndicators(),this.props.children)},tslib_1.__decorate([autobind],t.prototype,"onHeaderItemClick",null),tslib_1.__decorate([autobind],t.prototype,"onSelectionChanged",null),tslib_1.__decorate([autobind],t.prototype,"onHeaderPickerChanged",null),t}(BaseComponent);export{HubHeader};

Components/ItemIndicator/ItemIndicator.d.ts

@@ -30,2 +30,3 @@ /// <reference types="react" />
     render(): JSX.Element | null;
+    private _onClick(ev);
 }

Components/ItemIndicator/ItemIndicator.js

@@ -1,1 +0,1 @@
-import*as tslib_1 from"tslib";import*as React from"react";import{IconButton}from"office-ui-fabric-react/lib/Button";import{TooltipHost,TooltipOverflowMode}from"office-ui-fabric-react/lib/Tooltip";import{autobind,BaseComponent}from"office-ui-fabric-react/lib/Utilities";import{VssIcon}from"../../VssIcon";import"./ItemIndicator.css";var ItemIndicator=function(t){function e(e){var o=t.call(this,e)||this;return o.state=o._buildNewState(o.props),o}return tslib_1.__extends(e,t),e.prototype.componentWillReceiveProps=function(t){this.setState(this._buildNewState(t))},e.prototype.componentDidMount=function(){this.props.item&&this.props.item.subscribe(this._onItemChanged)},e.prototype.componentDidUpdate=function(t,e){this.props.item!==t.item&&(this.props.item&&this.props.item.subscribe(this._onItemChanged),t.item&&t.item.unsubscribe(this._onItemChanged))},e.prototype.componentWillUnmount=function(){this.props.item&&this.props.item.unsubscribe(this._onItemChanged)},e.prototype._buildNewState=function(t){if(t.item){var e=t.item.getState();return{title:e.title,iconProps:e.iconProps}}return{title:t.title,iconProps:t.iconProps}},e.prototype.render=function(){var t,e,o=this.state,i=o.title,n=o.iconProps,r=this.props.onClick;return n?(i=i||n.title,e=React.createElement(VssIcon,tslib_1.__assign({},tslib_1.__assign({},n,{title:void 0})))):(t=TooltipOverflowMode.Parent,e=React.createElement("span",{className:"vss-ItemIndicator--textIndicator"},i)),r&&(e=React.createElement(IconButton,{onClick:this._onClick,ariaLabel:i},e)),i&&(e=React.createElement(TooltipHost,{content:i,overflowMode:t},e)),e},e.prototype._onClick=function(t){var e=this.props,o=e.item,i=e.onClick;i&&i(t,o)},e.prototype._onItemChanged=function(t){this.setState({title:t.title,iconProps:t.iconProps})},tslib_1.__decorate([autobind],e.prototype,"_onClick",null),tslib_1.__decorate([autobind],e.prototype,"_onItemChanged",null),e}(BaseComponent);export{ItemIndicator};var ItemIndicatorSet=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return tslib_1.__extends(e,t),e.prototype.render=function(){var t=this.props.indicators;if(t&&t.length){var e=t.map(function(t,e){return React.createElement(ItemIndicator,tslib_1.__assign({},t,{key:"ItemIndicator$"+e}))});return React.createElement("div",{className:"vss-IndicatorSet"},e)}return null},e}(BaseComponent);export{ItemIndicatorSet};
+import*as tslib_1 from"tslib";import*as React from"react";import{IconButton}from"office-ui-fabric-react/lib/Button";import{TooltipHost,TooltipOverflowMode}from"office-ui-fabric-react/lib/Tooltip";import{autobind,BaseComponent,css}from"office-ui-fabric-react/lib/Utilities";import{VssIcon}from"../../VssIcon";import"./ItemIndicator.css";var ItemIndicator=function(t){function e(e){var o=t.call(this,e)||this;return o.state=o._buildNewState(o.props),o}return tslib_1.__extends(e,t),e.prototype.componentWillReceiveProps=function(t){this.setState(this._buildNewState(t))},e.prototype.componentDidMount=function(){this.props.item&&this.props.item.subscribe(this._onItemChanged)},e.prototype.componentDidUpdate=function(t,e){this.props.item!==t.item&&(this.props.item&&this.props.item.subscribe(this._onItemChanged),t.item&&t.item.unsubscribe(this._onItemChanged))},e.prototype.componentWillUnmount=function(){this.props.item&&this.props.item.unsubscribe(this._onItemChanged)},e.prototype._buildNewState=function(t){if(t.item){var e=t.item.getState();return{title:e.title,iconProps:e.iconProps}}return{title:t.title,iconProps:t.iconProps}},e.prototype.render=function(){var t,e,o=this.state,i=o.title,n=o.iconProps,s=this.props,r=s.onClick,c=s.className;return n?(i=i||n.title,e=React.createElement(VssIcon,tslib_1.__assign({},tslib_1.__assign({},n,{title:void 0,className:css(n.className,c,{"vss-ItemIndicator":!r&&!i})})))):(t=TooltipOverflowMode.Parent,e=React.createElement("span",{className:css("vss-ItemIndicator--textIndicator",c,{"vss-ItemIndicator":!r&&!i})},i)),r&&(e=React.createElement(IconButton,{className:css({"vss-ItemIndicator":!i}),onClick:this._onClick,ariaLabel:i},e)),i&&(e=React.createElement(TooltipHost,{hostClassName:"vss-ItemIndicator",content:i,overflowMode:t},e)),e},e.prototype._onClick=function(t){var e=this.props,o=e.item,i=e.onClick;i&&(i(t,o),t.preventDefault())},e.prototype._onItemChanged=function(t){this.setState({title:t.title,iconProps:t.iconProps})},tslib_1.__decorate([autobind],e.prototype,"_onClick",null),tslib_1.__decorate([autobind],e.prototype,"_onItemChanged",null),e}(BaseComponent);export{ItemIndicator};var ItemIndicatorSet=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return tslib_1.__extends(e,t),e.prototype.render=function(){var t=this.props.indicators;if(t&&t.length){var e=t.map(function(t,e){return React.createElement(ItemIndicator,tslib_1.__assign({},t,{key:"ItemIndicator$"+e}))});return React.createElement("div",{className:"vss-IndicatorSet",onClick:this._onClick},e)}return null},e.prototype._onClick=function(t){!t.isDefaultPrevented()&&this.props.onClick&&this.props.onClick(t)},tslib_1.__decorate([autobind],e.prototype,"_onClick",null),e}(BaseComponent);export{ItemIndicatorSet};

Components/PickList/index.d.ts

@@ -0,1 +1,2 @@
+export * from './ItemPicker';
 export * from './PickList';
@@ -2,0 +3,0 @@ export * from './PickListDropdown';

Components/PickList/index.js

@@ -1,1 +0,1 @@
-export*from"./PickList";export*from"./PickListDropdown";export*from"./PickListFilterBarItem";
+export*from"./ItemPicker";export*from"./PickList";export*from"./PickListDropdown";export*from"./PickListFilterBarItem";

Components/PickList/PickList.d.ts

@@ -12,2 +12,11 @@ /// <reference types="react" />
     /**
+     * The current set of items. If a promise is supplied through the items prop, then this
+     * is initially empty until the promise has been resolved.
+     */
+    items?: any[];
+    /**
+     * True if a promise was supplied for the items prop and it has not yet been fulfilled.
+     */
+    itemsLoading?: boolean;
+    /**
      * The wrapped data models for all items provided to the PickList
@@ -23,6 +32,2 @@ */
     filteredItems?: IPickListItemInternal[];
-    /**
-     * The current searchText in the TextField
-     */
-    searchText?: string;
     isSearchInProgress?: boolean;
@@ -37,3 +42,4 @@ selectedOperatorKey?: string;
     isGroupHeader?: boolean;
-    isSearchMessage?: boolean;
+    isMessage?: boolean;
+    isLoadingIndicator?: boolean;
 }
@@ -48,2 +54,10 @@ export declare class PickList extends BaseComponent<IPickListProps, IPickListState> implements IPickList {
     private _maintainsOwnState;
+    private _initialItemsLoaded;
+    private _hideLoadingContent;
+    private _loadingContentHidden;
+    private _hideSearchingContent;
+    private _searchingContentHidden;
+    private _hideSearchingContentTimeout;
+    private _searchTextChangeDelegate;
+    private _searchText;
     private _itemDictionary;
@@ -62,13 +76,15 @@ constructor(props: IPickListProps);
     private _rebuild(props);
+    private _buildFromItems(props, items, loading);
     private _onKeyDown(ev);
     private _lastElementHasFocus();
     private _firstElementHasFocus();
+    private _onSearchTextChanged(searchText);
     private _onClearInputKeyPress(ev);
     private _onClearInputClick();
     private _onPageAdded();
-    private _updateSearchText(searchText);
+    private _updateSearchText();
     private _wrapItems(items, selectedKeys, overrideGroupKey?);
     private _groupItems(items, initialGroupDictionary?);
     private _filterByText(searchText, groupDictionary);
-    private _buildGroupedItems(searchText, isSearchInProgress, groupDictionary, groups, selectedKeys);
+    private _buildGroupedItems(searchText, isSearchInProgress, groupDictionary, groups, selectedKeys, itemsLoading);
     private _getOnSearchPromise(searchText);
@@ -83,4 +99,6 @@ private _onSelectionChanged(newSelectedKeys, selectedOperatorKey?);
     private _getIndicators(pickListItem, indicators?);
-    private _getKeysFromItems(items);
+    private _getKeysFromItems(items, allItems);
+    private _hasNewItems(newProps);
+    private _isThenable(obj);
     private _arrayEquals(array1, array2);
 }

Components/PickList/PickList.js

@@ -1,1 +0,1 @@
-import*as tslib_1 from"tslib";import*as React from"react";import*as ReactDOM from"react-dom";import{CommandButton}from"office-ui-fabric-react/lib/Button";import{ChoiceGroup}from"office-ui-fabric-react/lib/ChoiceGroup";import{Checkbox}from"office-ui-fabric-react/lib/Checkbox";import{FocusZone,FocusZoneDirection}from"office-ui-fabric-react/lib/FocusZone";import{List}from"office-ui-fabric-react/lib/List";import{SelectionMode}from"office-ui-fabric-react/lib/Selection";import{TextField}from"office-ui-fabric-react/lib/TextField";import{TooltipOverflowMode,TooltipHost}from"office-ui-fabric-react/lib/Tooltip";import{autobind,BaseComponent,css,getRTLSafeKeyCode,doesElementContainFocus}from"office-ui-fabric-react/lib/Utilities";import{ItemIndicatorSet}from"../../ItemIndicator";import{VssIcon}from"../../VssIcon";import*as VSSUIResources from"../../Resources/VSS.Resources.VSSUI";import"./PickList.css";var SELECT_ALL_ITEM_KEY="select-all-item",DEFAULT_MIN_ITEMS_NO_SEARCH=8,PickList=function(e){function t(t){var i=e.call(this,t)||this;i._maintainsOwnState=!1,i._itemDictionary={},t.initiallySelectedItems&&t.selectedItems&&console.warn("Please only provide ONE of initiallySelectedItems OR selectedItems as props");var o=[],s=[];return t.initiallySelectedItems?(i._maintainsOwnState=!0,s=o=i._getKeysFromItems(t.initiallySelectedItems)):t.selectedItems&&(s=i._getKeysFromItems(t.selectedItems)),i.state={isSearchInProgress:!1,initiallySelectedKeys:o,selectedKeys:s,filteredItems:[],searchResults:[],selectedOperatorKey:t.selectedOperatorKey,initiallySelectedOperatorKey:t.selectedOperatorKey},i}return tslib_1.__extends(t,e),t.prototype.clearSelection=function(){this._onSelectionChanged([],this.state.initiallySelectedOperatorKey)},t.prototype.reset=function(){this._onSelectionChanged(this.state.initiallySelectedKeys,this.state.initiallySelectedOperatorKey)},t.prototype.selectAll=function(){this.props.selectionMode===SelectionMode.multiple&&this._onSelectionChanged(this._getKeysFromItems(this.props.items))},t.prototype.focus=function(){return this._textField?(this._textField.focus(),!0):!!this._focusZone&&(this._firstRow?this._focusZone.focusElement(ReactDOM.findDOMNode(this._firstRow)):this._focusZone.focus())},t.prototype.forceUpdate=function(){this._isMounted&&this._rebuild(this.props)},t.prototype.componentWillMount=function(){this._rebuild(this.props)},t.prototype.componentDidMount=function(){this._isMounted=!0},t.prototype.componentWillUnmount=function(){this._isMounted=!1},t.prototype.componentWillReceiveProps=function(e){if(this._arrayEquals(this.props.items,e.items))if(this._arrayEquals(this.props.selectedItems,e.selectedItems))this.props.selectedOperatorKey!==e.selectedOperatorKey&&this.setState({selectedOperatorKey:e.selectedOperatorKey});else{var t=this._getKeysFromItems(e.selectedItems),i=this.state.filteredItems.map(function(e){return e.isSelected=t.some(function(t){return t===e.key}),e}),o=this;for(var s in this._itemDictionary)!function(e){o._itemDictionary[e].isSelected=t.some(function(t){return t===e})}(s);this.setState({filteredItems:i,selectedKeys:t,selectedOperatorKey:e.selectedOperatorKey})}else this._rebuild(e)},t.prototype.render=function(){var e=this.props,t=e.getActions,i=(e.selectionMode,e.searchTextPlaceholder),o=e.isSearchable,s=e.searchBoxAriaLabel,n=e.onSearch,r=e.className,a=e.noItemsText,c=e.operators,l=e.minItemsForSearchBox,p=void 0===l?DEFAULT_MIN_ITEMS_NO_SEARCH:l,u=e.shouldVirtualize,d=this.state,h=d.filteredItems,m=d.searchText,_=(d.isSearchInProgress,h?h.slice():[]),f=t&&t(_),y=f&&f.length>0&&f.map(function(e,t){return React.createElement(PickListAction,{key:String(t),action:e})}),S=m?{iconName:"Clear",className:"clear-filter-input",tabIndex:0,onClick:this._onClearInputClick,onKeyPress:this._onClearInputKeyPress,role:"button",ariaLabel:VSSUIResources.FilterTextItemClearLabel}:void 0,g=_&&_.length>1&&c&&React.createElement(PickListOperatorGroup,{operators:c,selectedOperatorKey:this.state.selectedOperatorKey,onChange:this._onOperatorChanged,ref:this._resolveRef("_operatorGroup")}),C=null,v="function"==typeof u?function(){return u(_)}:void 0;_.length?C=React.createElement("div",{className:"vss-PickList--items",role:"listbox"},React.createElement(List,{items:_,onRenderCell:this._onRenderCell,onPageAdded:this._onPageAdded,onShouldVirtualize:v})):a&&(C=React.createElement("div",{role:"alert","aria-live":"assertive",className:"vss-PickList--noItemsText"},a));var E=null;(C||y)&&(E=React.createElement(FocusZone,{ref:this._resolveRef("_focusZone"),isInnerZoneKeystroke:function(e){return e.which===getRTLSafeKeyCode(39)},direction:FocusZoneDirection.vertical,onActiveElementChanged:this._onActiveElementChanged,isCircularNavigation:!0},C,y&&React.createElement("div",{className:"vss-PickList--actions"},y)));var I={};return this.props.width&&(_.length?I.width=this.props.width+"px":I.minWidth=this.props.width+"px"),React.createElement("div",{className:css("vss-PickList",r),style:I,onKeyDown:this._onKeyDown},o&&(this.props.items.length>=p||n)&&React.createElement(TextField,{className:"vss-PickList--searchTextField",ref:this._resolveRef("_textField"),placeholder:i,value:m,ariaLabel:s||i,onChanged:this._async.debounce(this._updateSearchText,250),iconProps:S}),g,E)},t.prototype._rebuild=function(e){var t=this._maintainsOwnState?this.state.selectedKeys:this._getKeysFromItems(e.selectedItems),i=this.state,o=i.searchText,s=i.searchResults,n=i.isSearchInProgress,r=this._wrapItems(e.items,t),a=this._wrapItems(s,t,"search-results"),c=this._groupItems(r),l=this._groupItems(a,c),p=this._filterByText(o,l),u=this._buildGroupedItems(o,!!n,p,e.groups,t);this.setState({groupDictionary:c,filteredItems:u,selectedKeys:t})},t.prototype._onKeyDown=function(e){if(9===e.which){var t=this.props.onFocusLost;if(t){var i=e.shiftKey;(this._lastElementHasFocus()&&!i||this._firstElementHasFocus()&&i)&&t()}}},t.prototype._lastElementHasFocus=function(){return!this._focusZone||doesElementContainFocus(this._focusZone.refs.root)},t.prototype._firstElementHasFocus=function(){return this._textField?doesElementContainFocus(ReactDOM.findDOMNode(this._textField)):this._operatorGroup?doesElementContainFocus(ReactDOM.findDOMNode(this._operatorGroup)):!this._focusZone||doesElementContainFocus(this._focusZone.refs.root)},t.prototype._onClearInputKeyPress=function(e){13!==e.which&&32!==e.which||this._updateSearchText("")},t.prototype._onClearInputClick=function(){this._updateSearchText("")},t.prototype._onPageAdded=function(){this._isListRendered||(this._isListRendered=!0,this.focus())},t.prototype._updateSearchText=function(e){var t=this,i=this.props,o=i.groups,s=i.onSearch,n=this.state,r=n.groupDictionary,a=n.selectedKeys,c=this.state.isSearchInProgress;e&&s&&(c=!0,this._getOnSearchPromise(e).then(function(i){c=!1;var s=t._wrapItems(i,a,"search-results"),n=t._groupItems(s,r),l=t._filterByText(e,n),p=t._buildGroupedItems(e,c,l,o,a);t.setState({isSearchInProgress:c,filteredItems:p,searchResults:i})}));var l=this._filterByText(e,r),p=this._buildGroupedItems(e,!!c,l,o,a);this.setState({searchText:e,filteredItems:p,isSearchInProgress:c,searchResults:[]})},t.prototype._wrapItems=function(e,t,i){var o=this,s=this.props,n=s.getListItem;s.onSearch;return e.map(function(e){var s=n?n(e):{name:e,key:e};s.groupKey||(s.groupKey="undefined-key");var r=tslib_1.__assign({},s,{isSelected:t.some(function(e){return e===s.key}),data:e});return i&&(r.groupKey=i),o._itemDictionary[s.key]=r,r})},t.prototype._groupItems=function(e,t){var i={};if(t)for(var o in t)i[o]=t[o].slice();return e&&e.length&&e.forEach(function(e){var t=e.groupKey;i[t]||(i[t]=[]),i[t].push(e)}),i},t.prototype._filterByText=function(e,t){var i={};if(e){var o=e.toLowerCase();for(var s in t){var n=t[s].filter(function(e){return-1!==e.name.toLowerCase().indexOf(o)||e.isSeparator});i[s]=n}}else i=t;return i},t.prototype._buildGroupedItems=function(e,t,i,o,s){var n=[],r=this.props,a=r.onSearch,c=r.searchResultsGroupName,l=r.searchResultsLoadingText,p=r.searchNoResultsText,u=r.selectionMode,d=r.showSelectAll,h=[{key:"undefined-key"}].concat(o||[]);if(a&&h.push({key:"search-results",name:c}),h.forEach(function(o){var s=o.key,r=i[s];r&&r.length?(o&&o.name&&n.push({isSeparator:!0,isGroupHeader:!0,name:o.name,key:"group-name-"+o.key,data:void 0,isSelected:!1}),n=n.concat(r)):"search-results"===s&&e&&e.length&&a&&(n.push({isSeparator:!0,isGroupHeader:!0,name:o.name||"",key:"group-name-"+o.key,isSelected:!1}),t&&l?n.push({isSeparator:!0,isSearchMessage:!0,name:l,key:"search-loading-"+o.key,data:void 0,isSelected:!1}):!t&&p&&n.push({isSeparator:!0,isSearchMessage:!0,name:p,key:"search-no-results-"+o.key,data:void 0,isSelected:!1}))}),u===SelectionMode.multiple&&d&&n.length>1){var m=-1!==s.indexOf(SELECT_ALL_ITEM_KEY),_={key:SELECT_ALL_ITEM_KEY,name:VSSUIResources.PickListSelectAllActionText,isSelected:!!m};n.splice(0,0,_),this._itemDictionary[SELECT_ALL_ITEM_KEY]=_}return n},t.prototype._getOnSearchPromise=function(e){var t=this.props,i=t.items,o=t.onSearch,s=o?o(e,i):[];return Promise.resolve(s)},t.prototype._onSelectionChanged=function(e,t){var i=this;if(this._isMounted){var o=this.props.onSelectionChanged,s=t||this.state.selectedOperatorKey;if(o){o({selectedItems:e.filter(function(e){return e!==SELECT_ALL_ITEM_KEY&&!!i._itemDictionary[e]}).map(function(e){return i._itemDictionary[e].data}),selectedOperatorKey:s})}if(this._maintainsOwnState){this.state.filteredItems.map(function(t){return t.isSelected=e.some(function(e){return e===t.key}),t});this.setState({filteredItems:this.state.filteredItems.slice(),selectedKeys:e,selectedOperatorKey:s})}}},t.prototype._onOperatorChanged=function(e){this._onSelectionChanged(this.state.selectedKeys,e)},t.prototype._onRenderCell=function(e,t){var i=this.props.selectionMode;return e.isSeparator?e.isGroupHeader?React.createElement("div",{className:"vss-PickList--groupHeader"},e.name):e.isSearchMessage?React.createElement("div",{className:"vss-PickList--searchMessage"},e.name):React.createElement("div",null,e.name):i===SelectionMode.multiple?this._onRenderCellMultipleSelection(e,t):this._onRenderCellSingleSelection(e,t)},t.prototype._onRenderCellSingleSelection=function(e,t){var i=this,o=this._getIndicators(e,this.props.indicators);return React.createElement(PickListRow,{ariaLabel:e.ariaLabel||e.name,ref:function(e){0===t&&(i._firstRow=e)},dataSelectionKey:e.key,isSelected:e.isSelected,setSize:this.state.filteredItems.length,itemIndex:t,onClick:function(){i._onSelectionChanged([e.key])}},React.createElement(PickListSelectableElement,{item:e,indicators:o,onSelectionChanged:function(){i._onSelectionChanged([e.key])}}))},t.prototype._onRenderCellMultipleSelection=function(e,t){var i=this,o=this._getIndicators(e,this.props.indicators);return React.createElement(PickListRow,{ariaLabel:e.ariaLabel||e.name,ref:function(e){0===t&&(i._firstRow=e)},dataSelectionKey:e.key,spaceBarTriggersClick:!0,isSelected:e.isSelected,setSize:this.state.filteredItems.length,itemIndex:t,onClick:function(){i._onMultipleSelectionChanged(e.key,!e.isSelected)}},React.createElement(PickListCheckboxElement,{item:e,indicators:o,onSelectionChanged:function(t){i._onMultipleSelectionChanged(e.key,t)}}))},t.prototype._onMultipleSelectionChanged=function(e,t){var i=[];e===SELECT_ALL_ITEM_KEY?i=t?this._getKeysFromItems(this.props.items):[]:(i=this.state.selectedKeys.filter(function(e){return e!==SELECT_ALL_ITEM_KEY}),t?i.push(e):i.splice(i.indexOf(e),1),i.length===this.props.items.length&&(i=[SELECT_ALL_ITEM_KEY].concat(i))),this._onSelectionChanged(i)},t.prototype._onActiveElementChanged=function(e){if(this.props.selectionMode===SelectionMode.single&&this.props.selectOnFocus){var t=e.getAttribute("data-selection-key");t&&this._onSelectionChanged([t])}},t.prototype._getIndicators=function(e,t){return t?t.map(function(t){return t.getItemIndicator(e.data)}):[]},t.prototype._getKeysFromItems=function(e){var t=this;if(e){var i=[];return(i=this.props.getListItem?e.map(function(e){return t.props.getListItem(e).key}):e).length===this.props.items.length&&(i=[SELECT_ALL_ITEM_KEY].concat(i)),i}return[]},t.prototype._arrayEquals=function(e,t){if(e&&t){if(e.length!==t.length)return!1;for(var i=0;i<e.length;i++)if(e[i]!==t[i])return!1;return!0}return e===t},tslib_1.__decorate([autobind],t.prototype,"_onKeyDown",null),tslib_1.__decorate([autobind],t.prototype,"_onClearInputKeyPress",null),tslib_1.__decorate([autobind],t.prototype,"_onClearInputClick",null),tslib_1.__decorate([autobind],t.prototype,"_onPageAdded",null),tslib_1.__decorate([autobind],t.prototype,"_updateSearchText",null),tslib_1.__decorate([autobind],t.prototype,"_onSelectionChanged",null),tslib_1.__decorate([autobind],t.prototype,"_onOperatorChanged",null),tslib_1.__decorate([autobind],t.prototype,"_onRenderCell",null),tslib_1.__decorate([autobind],t.prototype,"_onRenderCellSingleSelection",null),tslib_1.__decorate([autobind],t.prototype,"_onRenderCellMultipleSelection",null),tslib_1.__decorate([autobind],t.prototype,"_onActiveElementChanged",null),t}(BaseComponent);export{PickList};var PickListRow=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return tslib_1.__extends(t,e),t.prototype.render=function(){return React.createElement("div",{role:"option","aria-selected":this.props.isSelected,"aria-label":this.props.ariaLabel,"aria-setsize":this.props.setSize,"aria-posinset":this.props.itemIndex+1,className:"vss-PickList--row",ref:this._resolveRef("_rowDiv"),"data-is-focusable":!0,onKeyDown:this._onKeyDown,"data-selection-key":this.props.dataSelectionKey},React.createElement(FocusZone,{direction:FocusZoneDirection.horizontal},this.props.children))},t.prototype._onKeyDown=function(e){if(13===e.which||32===e.which&&this.props.spaceBarTriggersClick){e.target===this._rowDiv&&this.props.onClick.call(null)}},tslib_1.__decorate([autobind],t.prototype,"_onKeyDown",null),t}(BaseComponent),PickListSelectableElement=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return tslib_1.__extends(t,e),t.prototype.render=function(){var e=this.props,t=e.item,i=e.indicators,o={};return t.iconProps&&t.iconProps.styles&&(o.icon=t.iconProps.styles.root),React.createElement("div",{className:css("vss-PickList--element","vss-PickList--selectableElement",{"is-selected":t.isSelected})},React.createElement(CommandButton,{className:"vss-PickList--selectableElementButton",iconProps:t.iconProps?VssIcon.getIconProps(t.iconProps):void 0,styles:o,onClick:this._onClick},React.createElement("div",{className:"vss-PickList--selectableElementButton-textContainer"},React.createElement(TooltipHost,{content:t.name,overflowMode:TooltipOverflowMode.Parent},React.createElement("span",{className:"vss-PickList--selectableElementButton-text"},t.name)))),React.createElement(ItemIndicatorSet,{indicators:i}))},t.prototype._onClick=function(){var e=this.props.onSelectionChanged;e&&e()},tslib_1.__decorate([autobind],t.prototype,"_onClick",null),t}(BaseComponent),PickListCheckboxElement=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return tslib_1.__extends(t,e),t.prototype.render=function(){var e=this.props,t=e.item,i=e.indicators,o=t.iconProps?React.createElement(VssIcon,tslib_1.__assign({className:"vss-PickList--multiSelectIcon"},t.iconProps)):null,s=React.createElement("div",{className:"vss-PickList--multiSelectTextContainer"},React.createElement(TooltipHost,{content:t.name,overflowMode:TooltipOverflowMode.Parent},React.createElement("span",{className:"vss-PickList--multiSelectText"},t.name))),n=React.createElement(ItemIndicatorSet,{indicators:i});return React.createElement("div",{className:css("vss-PickList--element","vss-PickList--multiSelectableElement"),onClick:this._onClick},React.createElement(Checkbox,{className:"vss-PickList--checkbox",checked:t.isSelected,onChange:this._onChange}),o,s,n)},t.prototype._onChange=function(e,t){this.props.onSelectionChanged(!this.props.item.isSelected)},t.prototype._onClick=function(e){e.defaultPrevented||(this.props.onSelectionChanged(!this.props.item.isSelected),e.preventDefault())},tslib_1.__decorate([autobind],t.prototype,"_onChange",null),tslib_1.__decorate([autobind],t.prototype,"_onClick",null),t}(BaseComponent),PickListAction=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return tslib_1.__extends(t,e),t.prototype.render=function(){var e=this.props.action,t=e.iconProps,i=e.name,o=e.disabled;return React.createElement("div",{className:"vss-PickList--action"},React.createElement(CommandButton,{className:"vss-PickList--selectableElementButton",onClick:this._onClick,disabled:o,styles:{textContainer:{textAlign:"left"}},iconProps:t?VssIcon.getIconProps(t):void 0},i))},t.prototype._onClick=function(e){this.props.action.onClick(e)},tslib_1.__decorate([autobind],t.prototype,"_onClick",null),t}(BaseComponent),PickListOperatorGroup=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return tslib_1.__extends(t,e),t.prototype.render=function(){var e=this.props,t=e.operators,i=(e.onChange,e.selectedOperatorKey),o=t.map(function(e){return{text:e.name,key:e.key}});return React.createElement(ChoiceGroup,{selectedKey:i,options:o,onChange:this._onChange,ref:this._resolveRef("_choiceGroup")})},t.prototype._onChange=function(e,t){this.props.onChange(t.key)},tslib_1.__decorate([autobind],t.prototype,"_onChange",null),t}(BaseComponent);
+import*as tslib_1 from"tslib";import*as React from"react";import*as ReactDOM from"react-dom";import{CommandButton}from"office-ui-fabric-react/lib/Button";import{ChoiceGroup}from"office-ui-fabric-react/lib/ChoiceGroup";import{Checkbox}from"office-ui-fabric-react/lib/Checkbox";import{FocusZone,FocusZoneDirection}from"office-ui-fabric-react/lib/FocusZone";import{List}from"office-ui-fabric-react/lib/List";import{SelectionMode}from"office-ui-fabric-react/lib/Selection";import{Spinner,SpinnerSize}from"office-ui-fabric-react/lib/Spinner";import{TextField}from"office-ui-fabric-react/lib/TextField";import{TooltipOverflowMode,TooltipHost}from"office-ui-fabric-react/lib/Tooltip";import{autobind,BaseComponent,css,getRTLSafeKeyCode,doesElementContainFocus}from"office-ui-fabric-react/lib/Utilities";import{ItemIndicatorSet}from"../../ItemIndicator";import{VssIcon}from"../../VssIcon";import*as VSSUIResources from"../../Resources/VSS.Resources.VSSUI";import"./PickList.css";var SELECT_ALL_ITEM_KEY="select-all-item",DEFAULT_MIN_ITEMS_NO_SEARCH=8,HIDE_LOADING_ITEMS_TIME_MS=250,SEARCH_TEXT_DEBOUNCE_TIME_MS=250,PickList=function(e){function t(t){var i=e.call(this,t)||this;return i._searchText="",i._maintainsOwnState=!1,i._itemDictionary={},t.initiallySelectedItems&&t.selectedItems&&console.warn("Please only provide ONE of initiallySelectedItems OR selectedItems as props"),t.initiallySelectedItems&&(i._maintainsOwnState=!0),i.state={isSearchInProgress:!1,initiallySelectedKeys:[],selectedKeys:[],filteredItems:[],searchResults:[],items:[],selectedOperatorKey:t.selectedOperatorKey,initiallySelectedOperatorKey:t.selectedOperatorKey},i._searchTextChangeDelegate=i._async.debounce(i._updateSearchText,SEARCH_TEXT_DEBOUNCE_TIME_MS),i._hideLoadingContent=!0,window.setTimeout(function(){i._hideLoadingContent=!1,i._loadingContentHidden&&i.forceUpdate()},HIDE_LOADING_ITEMS_TIME_MS),i}return tslib_1.__extends(t,e),t.prototype.clearSelection=function(){this._onSelectionChanged([],this.state.initiallySelectedOperatorKey)},t.prototype.reset=function(){this._onSelectionChanged(this.state.initiallySelectedKeys,this.state.initiallySelectedOperatorKey)},t.prototype.selectAll=function(){this.props.selectionMode===SelectionMode.multiple&&this._onSelectionChanged(this._getKeysFromItems(this.state.items,this.state.items))},t.prototype.focus=function(){return this._textField?(this._textField.focus(),!0):!!this._focusZone&&(this._firstRow?this._focusZone.focusElement(ReactDOM.findDOMNode(this._firstRow)):this._focusZone.focus())},t.prototype.forceUpdate=function(){this._isMounted&&this._rebuild(this.props)},t.prototype.componentWillMount=function(){this._rebuild(this.props)},t.prototype.componentDidMount=function(){this._isMounted=!0},t.prototype.componentWillUnmount=function(){this._isMounted=!1},t.prototype.componentWillReceiveProps=function(e){if(this._hasNewItems(e))if(this._arrayEquals(this.props.selectedItems,e.selectedItems))this.props.selectedOperatorKey!==e.selectedOperatorKey&&this.setState({selectedOperatorKey:e.selectedOperatorKey});else{var t=this._getKeysFromItems(e.selectedItems,this.state.items),i=this.state.filteredItems.map(function(e){return e.isSelected=t.some(function(t){return t===e.key}),e}),o=function(e){s._itemDictionary[e].isSelected=t.some(function(t){return t===e})},s=this;for(var n in this._itemDictionary)o(n);this.setState({filteredItems:i,selectedKeys:t,selectedOperatorKey:e.selectedOperatorKey})}else this._rebuild(e)},t.prototype.render=function(){var e,t=this.props,i=t.getActions,o=(t.selectionMode,t.searchTextPlaceholder),s=t.isSearchable,n=t.searchBoxAriaLabel,r=t.onSearch,a=t.className,c=t.noItemsText,l=t.operators,p=t.minItemsForSearchBox,d=void 0===p?DEFAULT_MIN_ITEMS_NO_SEARCH:p,h=t.shouldVirtualize,u=this.state,m=u.filteredItems,_=(u.isSearchInProgress,m?m.slice():[]),f=0===_.length&&this._loadingContentHidden,y=(e=f?[]:i&&i(_))&&e.length>0&&e.map(function(e,t){return React.createElement(PickListAction,{key:String(t),action:e})}),S=this._searchText?{iconName:"Clear",className:"clear-filter-input",tabIndex:0,onClick:this._onClearInputClick,onKeyPress:this._onClearInputKeyPress,role:"button",ariaLabel:VSSUIResources.FilterTextItemClearLabel}:void 0,g=_&&_.length>1&&l&&React.createElement(PickListOperatorGroup,{operators:l,selectedOperatorKey:this.state.selectedOperatorKey,onChange:this._onOperatorChanged,ref:this._resolveRef("_operatorGroup")}),C=null,I="function"==typeof h?function(){return h(_)}:void 0;_.length?C=React.createElement("div",{className:"vss-PickList--items",role:"listbox"},React.createElement(List,{items:_,onRenderCell:this._onRenderCell,onPageAdded:this._onPageAdded,onShouldVirtualize:I})):c&&!f&&(C=React.createElement("div",{role:"alert","aria-live":"assertive",className:"vss-PickList--noItemsText"},c));var E=null;(C||y)&&(E=React.createElement(FocusZone,{ref:this._resolveRef("_focusZone"),isInnerZoneKeystroke:function(e){return e.which===getRTLSafeKeyCode(39)},direction:FocusZoneDirection.vertical,onActiveElementChanged:this._onActiveElementChanged,isCircularNavigation:!0},C,y&&React.createElement("div",{className:"vss-PickList--actions"},y)));var b={};return this.props.width&&(_.length?b.width=this.props.width+"px":b.minWidth=this.props.width+"px"),React.createElement("div",{className:css("vss-PickList",a),style:b,onKeyDown:this._onKeyDown},s&&!f&&(this.state.items.length>=d||r)&&React.createElement(TextField,{className:"vss-PickList--searchTextField",ref:this._resolveRef("_textField"),placeholder:o,value:this._searchText,ariaLabel:n||o,onChanged:this._onSearchTextChanged,iconProps:S}),g,E)},t.prototype._rebuild=function(e){var t=this;this._isThenable(e.items)?(this._buildFromItems(e,[],!0),e.items.then(function(i){t.props.items===e.items&&t._buildFromItems(e,i,!1)})):this._buildFromItems(e,e.items||[],!1)},t.prototype._buildFromItems=function(e,t,i){var o=this.state.initiallySelectedKeys,s=this.state.selectedKeys;i||this._initialItemsLoaded||(e.initiallySelectedItems&&(s=o=this._getKeysFromItems(e.initiallySelectedItems,t)),this._initialItemsLoaded=!0),this._maintainsOwnState||(s=this._getKeysFromItems(e.selectedItems,t));var n=this.state,r=n.searchResults,a=n.isSearchInProgress,c=this._wrapItems(t,s),l=this._wrapItems(r,s,"search-results"),p=this._groupItems(c),d=this._groupItems(l,p),h=this._filterByText(this._searchText,d),u=this._buildGroupedItems(this._searchText,!!a,h,e.groups,s,i);this.setState({items:t,groupDictionary:p,initiallySelectedKeys:o,filteredItems:u,selectedKeys:s,itemsLoading:i})},t.prototype._onKeyDown=function(e){if(9===e.which){var t=this.props.onFocusLost;if(t){var i=e.shiftKey;(this._lastElementHasFocus()&&!i||this._firstElementHasFocus()&&i)&&t()}}},t.prototype._lastElementHasFocus=function(){return!this._focusZone||doesElementContainFocus(this._focusZone.refs.root)},t.prototype._firstElementHasFocus=function(){return this._textField?doesElementContainFocus(ReactDOM.findDOMNode(this._textField)):this._operatorGroup?doesElementContainFocus(ReactDOM.findDOMNode(this._operatorGroup)):!this._focusZone||doesElementContainFocus(this._focusZone.refs.root)},t.prototype._onSearchTextChanged=function(e){this._searchText=e,this._searchTextChangeDelegate(e)},t.prototype._onClearInputKeyPress=function(e){13!==e.which&&32!==e.which||(this._searchText="",this._updateSearchText())},t.prototype._onClearInputClick=function(){this._searchText="",this._updateSearchText()},t.prototype._onPageAdded=function(){this._isListRendered||(this._isListRendered=!0,this.focus())},t.prototype._updateSearchText=function(){var e=this,t=this.props,i=t.groups,o=t.onSearch,s=this.state,n=s.groupDictionary,r=s.itemsLoading,a=s.selectedKeys,c=this.state.isSearchInProgress,l=this._searchText;l&&o&&(c=!0,this._hideSearchingContentTimeout&&(window.clearTimeout(this._hideSearchingContentTimeout),this._hideSearchingContentTimeout=0),this._hideSearchingContent=!0,this._hideSearchingContentTimeout=window.setTimeout(function(){e._hideSearchingContent=!1,e._searchingContentHidden&&e.forceUpdate()},HIDE_LOADING_ITEMS_TIME_MS),this._getOnSearchPromise(l).then(function(t){if(l===e._searchText){c=!1;var o=e._wrapItems(t,a,"search-results"),s=e._groupItems(o,n),p=e._filterByText(l,s),d=e._buildGroupedItems(l,c,p,i,a,r);e.setState({isSearchInProgress:c,filteredItems:d,searchResults:t})}}));var p=this._filterByText(l,n),d=this._buildGroupedItems(l,!!c,p,i,a,r);this.setState({filteredItems:d,isSearchInProgress:c,searchResults:[]})},t.prototype._wrapItems=function(e,t,i){var o=this,s=this.props,n=s.getListItem;s.onSearch;return e.map(function(e){var s=n?n(e):{name:e,key:e};s.groupKey||(s.groupKey="undefined-key");var r=tslib_1.__assign({},s,{isSelected:t.some(function(e){return e===s.key}),data:e});return i&&(r.groupKey=i),o._itemDictionary[s.key]=r,r})},t.prototype._groupItems=function(e,t){var i={};if(t)for(var o in t)i[o]=t[o].slice();return e&&e.length&&e.forEach(function(e){var t=e.groupKey;i[t]||(i[t]=[]),i[t].push(e)}),i},t.prototype._filterByText=function(e,t){var i={};if(e){var o=e.toLowerCase();for(var s in t){var n=t[s].filter(function(e){return-1!==e.name.toLowerCase().indexOf(o)||e.isSeparator});i[s]=n}}else i=t;return i},t.prototype._buildGroupedItems=function(e,t,i,o,s,n){var r=this,a=[],c=this.props,l=c.itemsLoadingText,p=c.onSearch,d=c.searchResultsGroupName,h=c.searchResultsLoadingText,u=c.searchNoResultsText,m=c.selectionMode,_=c.showSelectAll,f=[{key:"undefined-key"}].concat(o||[]);p&&f.push({key:"search-results",name:d});var y=!1,S=!1;if(this._loadingContentHidden=!1,this._searchingContentHidden=!1,f.forEach(function(o){var s=o.key,c=i[s];c&&c.length?(o&&(y||o.name)&&a.push({isSeparator:!0,isGroupHeader:!0,name:o.name,key:"group-name-"+o.key,data:void 0,isSelected:!1}),a=a.concat(c),y=!0):"search-results"===s?e&&e.length&&p&&(t&&r._hideSearchingContent?r._searchingContentHidden=!0:(t||!t&&u)&&((y||o.name)&&a.push({isSeparator:!0,isGroupHeader:!0,name:o.name||"",key:"group-name-"+o.key,isSelected:!1}),t?a.push({isSeparator:!0,isLoadingIndicator:!0,name:h||VSSUIResources.Searching,key:"search-loading-"+o.key,data:void 0,isSelected:!1}):a.push({isSeparator:!0,isMessage:!0,name:u,key:"search-no-results-"+o.key,data:void 0,isSelected:!1}),y=!0)):(n&&"undefined-key"===o.key||o.isLoading)&&(r._hideLoadingContent?r._loadingContentHidden=!0:S||(S=!0,(y||o.name)&&a.push({isSeparator:!0,isGroupHeader:!0,name:o.name,key:"group-name-"+o.key,data:void 0,isSelected:!1}),a.push({isSeparator:!0,isLoadingIndicator:!0,name:o.loadingMessage||l||VSSUIResources.Loading,key:"items-loading-"+o.key,data:void 0,isSelected:!1}),y=!0))}),m===SelectionMode.multiple&&_&&a.length>1){var g=-1!==s.indexOf(SELECT_ALL_ITEM_KEY),C={key:SELECT_ALL_ITEM_KEY,name:VSSUIResources.PickListSelectAllActionText,isSelected:!!g};a.splice(0,0,C),this._itemDictionary[SELECT_ALL_ITEM_KEY]=C}return a},t.prototype._getOnSearchPromise=function(e){var t=this.props,i=(t.items,t.onSearch),o=i?i(e,this.state.items):[];return Promise.resolve(o)},t.prototype._onSelectionChanged=function(e,t){var i=this,o=!1;if(this._isMounted){var s=this.props.onSelectionChanged,n=t||this.state.selectedOperatorKey;if(s){o=!0===s({selectedItems:e.filter(function(e){return e!==SELECT_ALL_ITEM_KEY&&!!i._itemDictionary[e]}).map(function(e){return i._itemDictionary[e].data}),selectedOperatorKey:n})}if(this._maintainsOwnState){this.state.filteredItems.map(function(t){return t.isSelected=e.some(function(e){return e===t.key}),t});this.setState({filteredItems:this.state.filteredItems.slice(),selectedKeys:e,selectedOperatorKey:n})}}return o},t.prototype._onOperatorChanged=function(e){this._onSelectionChanged(this.state.selectedKeys,e)},t.prototype._onRenderCell=function(e,t){var i=this.props.selectionMode;return e.isSeparator?e.isGroupHeader?e.name?React.createElement("div",{className:"vss-PickList--groupHeader"},e.name):React.createElement("div",{className:"vss-PickList--groupSeparator"}):e.isLoadingIndicator?React.createElement("div",{className:"vss-PickList--loading"},React.createElement(Spinner,{size:SpinnerSize.medium,label:e.name})):e.isMessage?React.createElement("div",{className:"vss-PickList--message"},e.name):React.createElement("div",null,e.name):i===SelectionMode.multiple?this._onRenderCellMultipleSelection(e,t):this._onRenderCellSingleSelection(e,t)},t.prototype._onRenderCellSingleSelection=function(e,t){var i=this,o=this._getIndicators(e,this.props.indicators);return React.createElement(PickListRow,{ariaLabel:e.ariaLabel||e.name,ref:function(e){0===t&&(i._firstRow=e)},dataSelectionKey:e.key,isSelected:e.isSelected,setSize:this.state.filteredItems.length,itemIndex:t,href:e.href,onKeyboardEnter:function(){return i._onSelectionChanged([e.key])}},React.createElement(PickListSelectableElement,{item:e,indicators:o,onSelectionChanged:function(){return i._onSelectionChanged([e.key])}}))},t.prototype._onRenderCellMultipleSelection=function(e,t){var i=this,o=this._getIndicators(e,this.props.indicators);return React.createElement(PickListRow,{ariaLabel:e.ariaLabel||e.name,ref:function(e){0===t&&(i._firstRow=e)},dataSelectionKey:e.key,spaceBarTriggersClick:!0,isSelected:e.isSelected,setSize:this.state.filteredItems.length,itemIndex:t,onKeyboardEnter:function(){return i._onMultipleSelectionChanged(e.key,!e.isSelected)}},React.createElement(PickListCheckboxElement,{item:e,indicators:o,onSelectionChanged:function(t){return i._onMultipleSelectionChanged(e.key,t)}}))},t.prototype._onMultipleSelectionChanged=function(e,t){var i=[];return e===SELECT_ALL_ITEM_KEY?i=t?this._getKeysFromItems(this.state.items,this.state.items):[]:(i=this.state.selectedKeys.filter(function(e){return e!==SELECT_ALL_ITEM_KEY}),t?i.push(e):i.splice(i.indexOf(e),1),i.length===this.state.items.length&&(i=[SELECT_ALL_ITEM_KEY].concat(i))),this._onSelectionChanged(i)},t.prototype._onActiveElementChanged=function(e){if(this.props.selectionMode===SelectionMode.single&&this.props.selectOnFocus){var t=e.getAttribute("data-selection-key");t&&this._onSelectionChanged([t])}},t.prototype._getIndicators=function(e,t){return t?t.map(function(t){return t.getItemIndicator(e.data)}):[]},t.prototype._getKeysFromItems=function(e,t){var i=this;if(e){var o=[];return o=this.props.getListItem?e.map(function(e){return i.props.getListItem(e).key}):e,t&&o.length===t.length&&(o=[SELECT_ALL_ITEM_KEY].concat(o)),o}return[]},t.prototype._hasNewItems=function(e){return this._isThenable(e.items)?this.props.items===e.items:this._arrayEquals(this.state.items,e.items)},t.prototype._isThenable=function(e){return e&&"function"==typeof e.then},t.prototype._arrayEquals=function(e,t){if(e&&t){if(e.length!==t.length)return!1;for(var i=0;i<e.length;i++)if(e[i]!==t[i])return!1;return!0}return e===t},tslib_1.__decorate([autobind],t.prototype,"_onKeyDown",null),tslib_1.__decorate([autobind],t.prototype,"_onSearchTextChanged",null),tslib_1.__decorate([autobind],t.prototype,"_onClearInputKeyPress",null),tslib_1.__decorate([autobind],t.prototype,"_onClearInputClick",null),tslib_1.__decorate([autobind],t.prototype,"_onPageAdded",null),tslib_1.__decorate([autobind],t.prototype,"_updateSearchText",null),tslib_1.__decorate([autobind],t.prototype,"_onSelectionChanged",null),tslib_1.__decorate([autobind],t.prototype,"_onOperatorChanged",null),tslib_1.__decorate([autobind],t.prototype,"_onRenderCell",null),tslib_1.__decorate([autobind],t.prototype,"_onRenderCellSingleSelection",null),tslib_1.__decorate([autobind],t.prototype,"_onRenderCellMultipleSelection",null),tslib_1.__decorate([autobind],t.prototype,"_onActiveElementChanged",null),t}(BaseComponent);export{PickList};var PickListRow=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return tslib_1.__extends(t,e),t.prototype.render=function(){return React.createElement("div",{role:"option","aria-selected":this.props.isSelected,"aria-label":this.props.ariaLabel,"aria-setsize":this.props.setSize,"aria-posinset":this.props.itemIndex+1,className:"vss-PickList--row",ref:this._resolveRef("_rowDiv"),"data-is-focusable":!0,onKeyDown:this._onKeyDown,"data-selection-key":this.props.dataSelectionKey},React.createElement(FocusZone,{direction:FocusZoneDirection.horizontal},this.props.children))},t.prototype._onKeyDown=function(e){if(13===e.which||32===e.which&&this.props.spaceBarTriggersClick){e.target===this._rowDiv&&(this.props.href?e.ctrlKey||e.shiftKey?window.open(this.props.href,"_blank","noopener"):this.props.onKeyboardEnter()||(window.location.href=this.props.href):this.props.onKeyboardEnter())}},tslib_1.__decorate([autobind],t.prototype,"_onKeyDown",null),t}(BaseComponent),PickListSelectableElement=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return tslib_1.__extends(t,e),t.prototype.render=function(){var e=this.props,t=e.item,i=e.indicators,o={};return t.iconProps&&t.iconProps.styles&&(o.icon=t.iconProps.styles.root),React.createElement("div",{className:css("vss-PickList--element","vss-PickList--selectableElement",{"is-selected":t.isSelected})},React.createElement(CommandButton,{className:"vss-PickList--selectableElementButton",iconProps:t.iconProps?VssIcon.getIconProps(t.iconProps):void 0,styles:o,href:t.href,tabIndex:-1,"data-is-focusable":!1,onClick:this._onClick},React.createElement("div",{className:"vss-PickList--selectableElementButton-textContainer"},React.createElement(TooltipHost,{content:t.name,overflowMode:TooltipOverflowMode.Parent},React.createElement("span",{className:"vss-PickList--selectableElementButton-text"},t.name)))),React.createElement(ItemIndicatorSet,{indicators:i,onClick:this._onClick}))},t.prototype._onClick=function(e){var t=this.props,i=t.item,o=t.onSelectionChanged;o&&(i.href&&(e.ctrlKey||e.shiftKey||1===e.button||2===e.button)||o()&&e.preventDefault())},tslib_1.__decorate([autobind],t.prototype,"_onClick",null),t}(BaseComponent),PickListCheckboxElement=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return tslib_1.__extends(t,e),t.prototype.render=function(){var e=this.props,t=e.item,i=e.indicators,o=t.iconProps?React.createElement(VssIcon,tslib_1.__assign({className:"vss-PickList--multiSelectIcon"},t.iconProps)):null,s=React.createElement("div",{className:"vss-PickList--multiSelectTextContainer"},React.createElement(TooltipHost,{content:t.name,overflowMode:TooltipOverflowMode.Parent},React.createElement("span",{className:"vss-PickList--multiSelectText"},t.name))),n=React.createElement(ItemIndicatorSet,{indicators:i});return React.createElement("div",{className:css("vss-PickList--element","vss-PickList--multiSelectableElement"),onClick:this._onClick},React.createElement(Checkbox,{className:"vss-PickList--checkbox",checked:t.isSelected,onChange:this._onChange}),o,s,n)},t.prototype._onChange=function(e,t){this.props.onSelectionChanged(!this.props.item.isSelected)},t.prototype._onClick=function(e){e.defaultPrevented||(this.props.onSelectionChanged(!this.props.item.isSelected),e.preventDefault())},tslib_1.__decorate([autobind],t.prototype,"_onChange",null),tslib_1.__decorate([autobind],t.prototype,"_onClick",null),t}(BaseComponent),PickListAction=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return tslib_1.__extends(t,e),t.prototype.render=function(){var e=this.props.action,t=e.href,i=e.iconProps,o=e.name,s=e.disabled;return React.createElement("div",{className:"vss-PickList--action"},React.createElement(CommandButton,{className:"vss-PickList--selectableElementButton",onClick:this._onClick,disabled:s,href:t,tabIndex:-1,styles:{textContainer:{textAlign:"left"}},iconProps:i?VssIcon.getIconProps(i):void 0},o))},t.prototype._onClick=function(e){this.props.action.onClick(e)},tslib_1.__decorate([autobind],t.prototype,"_onClick",null),t}(BaseComponent),PickListOperatorGroup=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return tslib_1.__extends(t,e),t.prototype.render=function(){var e=this.props,t=e.operators,i=(e.onChange,e.selectedOperatorKey),o=t.map(function(e){return{text:e.name,key:e.key}});return React.createElement(ChoiceGroup,{selectedKey:i,options:o,onChange:this._onChange,ref:this._resolveRef("_choiceGroup")})},t.prototype._onChange=function(e,t){this.props.onChange(t.key)},tslib_1.__decorate([autobind],t.prototype,"_onChange",null),t}(BaseComponent);

Components/PickList/PickListDropdown.d.ts

@@ -19,2 +19,3 @@ /// <reference types="react" />
     private _getTitleText();
+    private getIndicators();
     private _onClick();
@@ -24,6 +25,7 @@ private _onKeyDown(ev);
     private _onPositioned();
-    private _onDismiss();
+    private _onDismiss(ev);
     private _onSelectionChanged(selection);
     private _getNameFromItem(item);
+    private _getIconFromItem(item);
     private _togglePickList(isListOpen);
 }

Components/PickList/PickListDropdown.js

@@ -1,1 +0,1 @@
-import*as tslib_1 from"tslib";import*as React from"react";import{Callout}from"office-ui-fabric-react/lib/Callout";import{autobind,BaseComponent,css,format}from"office-ui-fabric-react/lib/Utilities";import{SelectionMode}from"office-ui-fabric-react/lib/Selection";import{TooltipOverflowMode,TooltipHost}from"office-ui-fabric-react/lib/Tooltip";import{PickList}from"../../Components/PickList/PickList";import{VssIcon,VssIconType}from"../../VssIcon";import"./PickListDropdown.css";var DEFAULT_PICKLIST_WIDTH=200,DEFAULT_VIRTUALIZATION_LIMIT=50,PickListDropdown=function(t){function i(i){var e=t.call(this,i)||this;return e.state={isListOpen:!1,pickListWidth:DEFAULT_PICKLIST_WIDTH},e._shouldRefocus=!0,e}return tslib_1.__extends(i,t),i.prototype.focus=function(){this.state.isListOpen?this._pickList.focus():this._dropdownTitle.focus()},i.prototype.forceUpdate=function(){this._pickList&&this._pickList.forceUpdate()},i.prototype.render=function(){var t=this,i=this.props,e=i.className,o=i.pickListClassName,s=i.placeholder,n=i.selectedItems,c=i.getPickListItems,r=i.disabled,a=i.preventDismissOnScroll,l=void 0===a||a,p=this.state.isListOpen,d=n&&n.length>0,h=d?this._getTitleText():s,_=css("vss-PickListDropdown",e),u=css("vss-PickListDropdown--list",o),m=h;return this.props.ariaLabelFormat&&(m=format(this.props.ariaLabelFormat,d?h:"")),React.createElement("div",{className:_,ref:this._resolveRef("_dropdown")},React.createElement("div",{tabIndex:r?-1:0,ref:function(i){return t._dropdownTitle=i},onClick:this._onClick,onKeyDown:this._onKeyDown,className:css("vss-PickListDropdown--title",{"vss-PickListDropdown--placeholder":!d,disabled:r,focused:p}),"aria-expanded":p,"aria-label":m,"aria-disabled":!!r,role:"combobox"},d&&React.createElement(VssIcon,{iconType:VssIconType.fabric,iconName:"CheckMark",className:"vss-PickListDropdown--title-checkIcon"}),React.createElement("div",{className:"vss-PickListDropdown--title-textContainer"},React.createElement(TooltipHost,{content:h,overflowMode:TooltipOverflowMode.Parent},React.createElement("span",{className:"vss-PickListDropdown--title-text",role:"textbox","aria-readonly":!0},h))),React.createElement(VssIcon,{className:"vss-PickListDropdown--title-caretIcon",iconType:VssIconType.fabric,iconName:"ChevronDown"})),p&&React.createElement(Callout,{onDismiss:this._onDismiss,onPositioned:this._onPositioned,target:this._dropdown,isBeakVisible:!1,preventDismissOnScroll:l,gapSpace:0,directionalHint:4},React.createElement(PickList,tslib_1.__assign({},this.props,{width:this.state.pickListWidth,className:u,onSelectionChanged:this._onSelectionChanged,componentRef:function(i){return t._pickList=i},items:c(),onFocusLost:this._onPickListFocusLost,shouldVirtualize:function(t){return(t||[]).length>DEFAULT_VIRTUALIZATION_LIMIT}}))))},i.prototype._getTitleText=function(){var t=this.props.selectedItems,i=this._getNameFromItem(t[0]);return t.length>1&&(i=i+" (+"+(t.length-1)+")"),i},i.prototype._onClick=function(){this.props.disabled||this._togglePickList(!this.state.isListOpen)},i.prototype._onKeyDown=function(t){this.props.disabled||(13===t.which||40===t.which?(this._togglePickList(!this.state.isListOpen),t.preventDefault()):27===t.which&&this._togglePickList(!1))},i.prototype._onPickListFocusLost=function(){this._shouldRefocus=!0,this._togglePickList(!1)},i.prototype._onPositioned=function(){this._shouldRefocus&&(this._shouldRefocus=!1,this._pickList.focus())},i.prototype._onDismiss=function(){this._shouldRefocus=!0,this._togglePickList(!1)},i.prototype._onSelectionChanged=function(t){var i=this.state.isListOpen&&this.props.selectionMode===SelectionMode.multiple;this._togglePickList(i),this.props.onSelectionChanged&&this.props.onSelectionChanged(t)},i.prototype._getNameFromItem=function(t){return this.props.getListItem?this.props.getListItem(t).name:t},i.prototype._togglePickList=function(t){var i=this._dropdownTitle?this._dropdownTitle.clientWidth:DEFAULT_PICKLIST_WIDTH;i-=2,this.setState({isListOpen:t,pickListWidth:i})},tslib_1.__decorate([autobind],i.prototype,"_onClick",null),tslib_1.__decorate([autobind],i.prototype,"_onKeyDown",null),tslib_1.__decorate([autobind],i.prototype,"_onPickListFocusLost",null),tslib_1.__decorate([autobind],i.prototype,"_onPositioned",null),tslib_1.__decorate([autobind],i.prototype,"_onDismiss",null),tslib_1.__decorate([autobind],i.prototype,"_onSelectionChanged",null),i}(BaseComponent);export{PickListDropdown};
+import*as tslib_1 from"tslib";import*as React from"react";import{Callout}from"office-ui-fabric-react/lib/Callout";import{autobind,BaseComponent,css,format}from"office-ui-fabric-react/lib/Utilities";import{SelectionMode}from"office-ui-fabric-react/lib/Selection";import{TooltipOverflowMode,TooltipHost}from"office-ui-fabric-react/lib/Tooltip";import{PickList}from"../../Components/PickList/PickList";import{VssIcon}from"../../VssIcon";import{ItemIndicatorSet}from"../../ItemIndicator";import"./PickListDropdown.css";var DEFAULT_PICKLIST_WIDTH=200,DEFAULT_VIRTUALIZATION_LIMIT=50,PickListDropdown=function(t){function e(e){var i=t.call(this,e)||this;return i.state={isListOpen:!1,pickListWidth:DEFAULT_PICKLIST_WIDTH},i._shouldRefocus=!0,i}return tslib_1.__extends(e,t),e.prototype.focus=function(){this.state.isListOpen?this._pickList.focus():this._dropdownTitle.focus()},e.prototype.forceUpdate=function(){this._pickList&&this._pickList.forceUpdate()},e.prototype.render=function(){var t=this,e=this.props,i=e.className,o=e.pickListClassName,s=e.placeholder,n=e.selectedItems,c=e.getPickListItems,r=e.disabled,a=e.selectionMode,l=e.preventDismissOnScroll,p=void 0===l||l,d=e.tabIndex,h=this.state.isListOpen,_=n&&n.length>0,m=_?this._getTitleText():s,u=css("vss-PickListDropdown",i),f=css("vss-PickListDropdown--list",o),L=m;this.props.ariaLabelFormat&&(L=format(this.props.ariaLabelFormat,_?m:""));var I=void 0;return _&&(I=a===SelectionMode.multiple?{iconType:0,iconName:"CheckMark",className:"vss-PickListDropdown--title-checkIcon"}:this._getIconFromItem(n[0])),React.createElement("div",{className:u,ref:this._resolveRef("_dropdown")},React.createElement("div",{tabIndex:r?-1:d||0,ref:function(e){return t._dropdownTitle=e},onClick:this._onClick,onKeyDown:this._onKeyDown,className:css("vss-PickListDropdown--title",{"vss-PickListDropdown--placeholder":!_,disabled:r,focused:h}),"aria-expanded":h,"aria-label":L,"aria-disabled":!!r,role:"combobox"},I&&React.createElement(VssIcon,tslib_1.__assign({},I)),React.createElement("div",{className:"vss-PickListDropdown--title-textContainer"},React.createElement(TooltipHost,{content:m,overflowMode:TooltipOverflowMode.Parent},React.createElement("span",{className:"vss-PickListDropdown--title-text",role:"textbox","aria-readonly":!0},m))),React.createElement(VssIcon,{className:"vss-PickListDropdown--title-caretIcon",iconType:0,iconName:"ChevronDown"}),this.getIndicators()),h&&React.createElement(Callout,{onDismiss:this._onDismiss,onPositioned:this._onPositioned,target:this._dropdown,isBeakVisible:!1,preventDismissOnScroll:p,gapSpace:0,directionalHint:4},React.createElement(PickList,tslib_1.__assign({},this.props,{width:this.state.pickListWidth,className:f,onSelectionChanged:this._onSelectionChanged,componentRef:function(e){return t._pickList=e},items:c(),onFocusLost:this._onPickListFocusLost,shouldVirtualize:function(t){return(t||[]).length>DEFAULT_VIRTUALIZATION_LIMIT}}))))},e.prototype._getTitleText=function(){var t=this.props.selectedItems,e=this._getNameFromItem(t[0]);return t.length>1&&(e=e+" (+"+(t.length-1)+")"),e},e.prototype.getIndicators=function(){var t=this.props,e=t.selectedItems,i=t.selectedItemIndicators;return e&&e.length&&i&&i.length?React.createElement(ItemIndicatorSet,{indicators:i.map(function(t){return t.getItemIndicator(e[0])})}):null},e.prototype._onClick=function(){this.props.disabled||this._togglePickList(!this.state.isListOpen)},e.prototype._onKeyDown=function(t){this.props.disabled||(13===t.which||40===t.which?(this._togglePickList(!this.state.isListOpen),t.preventDefault()):27===t.which&&(this._togglePickList(!1),this._dropdownTitle.focus()))},e.prototype._onPickListFocusLost=function(){this._shouldRefocus=!0,this._togglePickList(!1)},e.prototype._onPositioned=function(){this._shouldRefocus&&(this._shouldRefocus=!1,this._pickList.focus())},e.prototype._onDismiss=function(t){this._shouldRefocus=!0,this._togglePickList(!1),27===t.which&&this._dropdownTitle.focus()},e.prototype._onSelectionChanged=function(t){var e=this.state.isListOpen&&this.props.selectionMode===SelectionMode.multiple;this._togglePickList(e),this.props.onSelectionChanged&&this.props.onSelectionChanged(t)},e.prototype._getNameFromItem=function(t){return this.props.getListItem?this.props.getListItem(t).name:t},e.prototype._getIconFromItem=function(t){if(this.props.getListItem)return this.props.getListItem(t).iconProps},e.prototype._togglePickList=function(t){var e=this._dropdownTitle?this._dropdownTitle.clientWidth:DEFAULT_PICKLIST_WIDTH;e-=2,this.setState({isListOpen:t,pickListWidth:e})},tslib_1.__decorate([autobind],e.prototype,"_onClick",null),tslib_1.__decorate([autobind],e.prototype,"_onKeyDown",null),tslib_1.__decorate([autobind],e.prototype,"_onPickListFocusLost",null),tslib_1.__decorate([autobind],e.prototype,"_onPositioned",null),tslib_1.__decorate([autobind],e.prototype,"_onDismiss",null),tslib_1.__decorate([autobind],e.prototype,"_onSelectionChanged",null),e}(BaseComponent);export{PickListDropdown};

Components/PickList/PickListFilterBarItem.js

@@ -1,1 +0,1 @@
-import*as tslib_1 from"tslib";import*as React from"react";import{autobind,format}from"office-ui-fabric-react/lib/Utilities";import{SelectionMode}from"office-ui-fabric-react/lib/Selection";import{FilterOperatorType}from"../../Utilities/Filter";import{PickListDropdown}from"../../Components/PickList/PickListDropdown";import{FilterBarItem}from"../../FilterBar";import{VssIconType}from"../../VssIcon";import*as VSSUIResources from"../../Resources/VSS.Resources.VSSUI";var PickListFilterBarItem=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return tslib_1.__extends(e,t),e.prototype.focus=function(){this._pickListDropdown.focus()},e.prototype.forceUpdate=function(){this._pickListDropdown&&this._pickListDropdown.forceUpdate()},e.prototype.componentDidMount=function(){t.prototype.componentDidMount.call(this),this._buildActions()},e.prototype.render=function(){var t=this,e=this.props.operators;return this.props.showOrAndOperators&&(e=[{name:VSSUIResources.FilterOperatorOr,key:FilterOperatorType[FilterOperatorType.or]},{name:VSSUIResources.FilterOperatorAnd,key:FilterOperatorType[FilterOperatorType.and]}]),React.createElement(PickListDropdown,tslib_1.__assign({className:"vss-PickListDropdown--filterBar",pickListClassName:"vss-PickList--filterBar",componentRef:function(e){return t._pickListDropdown=e},showSelectAll:this.props.selectionMode===SelectionMode.multiple,ariaLabelFormat:this.props.placeholder&&format(VSSUIResources.FilterDropdownLabel,this.props.placeholder)+" {0}"},this.props,{operators:e,selectedItems:this.state.value,selectedOperatorKey:FilterOperatorType[this.state.operator],getActions:this._getActions,onSelectionChanged:this._onSelectionChanged}))},e.prototype._onClearClicked=function(){this.setFilterValue({value:[],operator:this.state.operator}),this.focus()},e.prototype._onSelectionChanged=function(t){this.setFilterValue({value:t.selectedItems,operator:FilterOperatorType[t.selectedOperatorKey]})},e.prototype._getActions=function(t){var e=[];return t&&t.length>0&&(this._clearAction.disabled=!this.state.value||0===this.state.value.length,e.push(this._clearAction)),e},e.prototype._buildActions=function(){this._clearAction={name:VSSUIResources.PickListClearActionText,iconProps:{iconName:"Clear",iconType:VssIconType.fabric},onClick:this._onClearClicked}},tslib_1.__decorate([autobind],e.prototype,"_onClearClicked",null),tslib_1.__decorate([autobind],e.prototype,"_onSelectionChanged",null),tslib_1.__decorate([autobind],e.prototype,"_getActions",null),e}(FilterBarItem);export{PickListFilterBarItem};
+import*as tslib_1 from"tslib";import*as React from"react";import{autobind,format}from"office-ui-fabric-react/lib/Utilities";import{SelectionMode}from"office-ui-fabric-react/lib/Selection";import{PickListDropdown}from"../../Components/PickList/PickListDropdown";import{FilterBarItem}from"../../FilterBar";import*as VSSUIResources from"../../Resources/VSS.Resources.VSSUI";var PickListFilterBarItem=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return tslib_1.__extends(e,t),e.prototype.focus=function(){this._pickListDropdown.focus()},e.prototype.forceUpdate=function(){this._pickListDropdown&&this._pickListDropdown.forceUpdate()},e.prototype.componentDidMount=function(){t.prototype.componentDidMount.call(this),this._buildActions()},e.prototype.render=function(){var t=this,e=this.props.operators;return this.props.showOrAndOperators&&(e=[{name:VSSUIResources.FilterOperatorOr,key:"or"},{name:VSSUIResources.FilterOperatorAnd,key:"and"}]),React.createElement(PickListDropdown,tslib_1.__assign({className:"vss-PickListDropdown--filterBar",pickListClassName:"vss-PickList--filterBar",componentRef:function(e){return t._pickListDropdown=e},showSelectAll:this.props.selectionMode===SelectionMode.multiple,ariaLabelFormat:this.props.placeholder&&format(VSSUIResources.FilterDropdownLabel,this.props.placeholder)+" {0}"},this.props,{operators:e,selectedItems:this.state.value,selectedOperatorKey:this.state.operator,getActions:this._getActions,onSelectionChanged:this._onSelectionChanged}))},e.prototype._onClearClicked=function(){this.setFilterValue({value:[],operator:this.state.operator}),this.focus()},e.prototype._onSelectionChanged=function(t){this.setFilterValue({value:t.selectedItems,operator:t.selectedOperatorKey})},e.prototype._getActions=function(t){var e=[];return t&&t.length>0&&(this._clearAction.disabled=!this.state.value||0===this.state.value.length,e.push(this._clearAction)),e},e.prototype._buildActions=function(){this._clearAction={name:VSSUIResources.PickListClearActionText,iconProps:{iconName:"Clear",iconType:0},onClick:this._onClearClicked}},tslib_1.__decorate([autobind],e.prototype,"_onClearClicked",null),tslib_1.__decorate([autobind],e.prototype,"_onSelectionChanged",null),tslib_1.__decorate([autobind],e.prototype,"_getActions",null),e}(FilterBarItem);export{PickListFilterBarItem};

Components/PivotBar/index.d.ts

@@ -0,7 +1,7 @@
+export * from './PivotBar';
 export * from './PivotBar.Props';
-export * from './PivotBar';
 export * from './PivotBarAction';
+export * from './PivotBarItem';
 export * from './PivotBarItem.Props';
-export * from './PivotBarItem';
 export * from './PivotCommandBar';
 export * from './PivotCommandBar.Props';

Components/PivotBar/index.js

@@ -1,1 +0,1 @@
-export*from"./PivotBar.Props";export*from"./PivotBar";export*from"./PivotBarAction";export*from"./PivotBarItem.Props";export*from"./PivotBarItem";export*from"./PivotCommandBar";
+export*from"./PivotBar";export*from"./PivotBar.Props";export*from"./PivotBarAction";export*from"./PivotBarItem";export*from"./PivotBarItem.Props";export*from"./PivotCommandBar";

Components/PivotBar/PivotBar.d.ts

@@ -71,7 +71,9 @@ /// <reference types="react" />
     render(): JSX.Element;
-    private _renderPivotItems();
+    private _renderPivotItems(pivotRenderingModeOptions);
+    private _renderDropdown(props);
+    private _onDropDownSelected(option);
+    private _renderHorizontalTabs();
     private _renderPivotItem(item, index);
     private _renderPivotItemContent(item);
-    private _renderSeparator(items, singleLineMode);
-    private _renderCommandBar(filterBar, showFilterAction);
+    private _renderCommandBar(filterBar, showFilterAction, prependSeparator);
     private _renderContent();
@@ -78,0 +80,0 @@ private _onShowFilterBarClicked();

Components/PivotBar/PivotBar.js

@@ -1,1 +0,1 @@
-import*as tslib_1 from"tslib";import*as React from"react";import{autobind,BaseComponent,css,getId,findIndex}from"office-ui-fabric-react/lib/Utilities";import{FocusZone,FocusZoneDirection}from"office-ui-fabric-react/lib/FocusZone";import{CommandButton}from"office-ui-fabric-react/lib/Button";import{TooltipHost,TooltipOverflowMode}from"office-ui-fabric-react/lib/Tooltip";import{childrenOfType}from"../../Utilities/ChildrenUtils";import{PivotBarItem}from"../../Components/PivotBar/PivotBarItem";import{DynamicLink}from"../../Dynamic";import{PivotBarItemDeselectionBehavior}from"../../Components/PivotBar/PivotBarItem.Props";import{HubTileRegion}from"../../HubHeader";import{FilterBar,KeywordFilterBarItem}from"../../FilterBar";import{FILTER_APPLIED_EVENT}from"../../Utilities/Filter";import{VssIcon}from"../../VssIcon";import{ObservableArray,ObservableLike}from"../../Utilities/Observable";import{ContributedItemArray}from"../../Utilities/ItemContribution";import{VIEW_OPTIONS_CHANGE_EVENT}from"../../Utilities/ViewOptions";import{arrayEquals}from"../../Utilities/Internal";import{PivotCommandBar}from"../../Components/PivotBar/PivotCommandBar";import"./PivotBar.css";var MAX_PIVOT_ITEM_WIDTH=340,MAX_PIVOT_WAIT=1e3,PivotBar=function(t){function e(e){var i=t.call(this,e)||this;return i._subscribedToPivotObservables=!1,i._pivotSelected=!1,i._pivotItemsRendered={},i._id=getId("PivotBar"),i._setupPivotObservables(i.props),i._actionsManager=new PivotActionsManager,i._disposables.push(i._actionsManager),i.state={items:i._getPivotBarItems(i.props)},i.state=tslib_1.__assign({hasAppliedFilter:!!i.props.filter&&i.props.filter.hasChangesToReset(),items:i.state.items},i._buildInitialPivotState()),i}return tslib_1.__extends(e,t),e.prototype.focus=function(t){if(this._commandBar)switch(t){case 0:this._commandBar.focus()}},e.prototype.componentWillReceiveProps=function(t){var e=this;arrayEquals(this.props.pivotProviders,t.pivotProviders)||this._setupPivotObservables(t);var i=this._getPivotBarItems(t);this.setState(function(o,r){return tslib_1.__assign({items:i},e._buildInitialPivotState(t,i,!0))})},e.prototype.componentDidMount=function(){this.props.viewOptions&&this.props.showFilterBarViewOptionKey&&this._events.on(this.props.viewOptions,VIEW_OPTIONS_CHANGE_EVENT,this._onViewOptionChanged),this.props.filter&&this._events.on(this.props.filter,FILTER_APPLIED_EVENT,this._onFilterApplied),this._subscribeToPivotObservables()},e.prototype.componentDidUpdate=function(){this.props.onRenderComplete&&this.props.onRenderComplete()},e.prototype.componentWillUnmount=function(){this.props.viewOptions&&this.props.showFilterBarViewOptionKey&&this._events.off(this.props.viewOptions,VIEW_OPTIONS_CHANGE_EVENT,this._onViewOptionChanged),this.props.filter&&this._events.off(this.props.filter,FILTER_APPLIED_EVENT,this._onFilterApplied),this._contributedPivotWait&&(clearTimeout(this._contributedPivotWait),this._contributedPivotWait=null),this._unsubscribeFromPivotObservables()},e.prototype.render=function(){var t=this.props,e=t.className,i=t.filter,o=t.showPivots,r=t.showFilterBarViewOptionKey,s=t.filterBarClassName,n=this.state,a=(n.selectedPivotId,n.showFilterBar),l=React.Children.toArray(this.props.children)||[],c=l.filter(function(t){return"object"!=typeof t||t.type!==PivotBarItem&&t.type!==FilterBar&&t.type!==HubTileRegion}),p=null,v=this._getHubTileRegionIndex(l);v>-1&&(p=l[v]);var d=null,m=v>-1;void 0===o?o=this.state.items&&this.state.items.length>1:m=m&&o,o&&(d=this._renderPivotItems());var u=!o&&!m,h=u?"vss-PivotBar--bar-one-line":"vss-PivotBar--bar-two-line";this.props.viewOptions&&r&&(a=this.props.viewOptions.getViewOption(r));var b,_=this._getFilterBarSettings(l),f=_&&_.showInline;return _&&(a||_.showInline)&&(b=_.filterBarElement,b=React.cloneElement(b,{className:css(b.props.className,s),filter:b.props.filter||i,onMounted:function(t){f||t.focus()}})),React.createElement("div",{className:css("vss-PivotBar",e)},React.createElement("div",{className:h},React.createElement("div",{className:"vss-PivotBar--header"},c,m&&p),React.createElement("div",{className:"vss-PivotBar--bar"},d,this._renderSeparator(d,u),this._renderCommandBar(f?b:null,!!_))),f?null:b,this._renderContent())},e.prototype._renderPivotItems=function(){return React.createElement(FocusZone,{className:"vss-PivotBar--pivots",role:"tablist",direction:FocusZoneDirection.horizontal},this.state.items&&this.state.items.map(this._renderPivotItem))},e.prototype._renderPivotItem=function(t,e){var i=t.itemKey,o=this.state.selectedPivot===i;return React.createElement(DynamicLink,{url:t.url,className:"vss-PivotBar--itemLink",tabIndex:-1,role:"presentation","data-is-focusable":!1,key:i},React.createElement(CommandButton,{id:t.id,className:css("vss-PivotBar--button",o?"selected":""),onClick:this._onPivotClick.bind(this,i),onKeyPress:this._onKeyPress.bind(this,i),ariaLabel:t.ariaLabel,role:"tab","aria-selected":o},this._renderPivotItemContent(t)))},e.prototype._renderPivotItemContent=function(t){var e=t.name,i=t.iconProps,o=t.badgeCount,r=t.maxItemWidth;return React.createElement("span",null,void 0!==i&&React.createElement(VssIcon,tslib_1.__assign({className:"icon"},i)),void 0!==e&&React.createElement("span",{className:"text",style:{maxWidth:r||MAX_PIVOT_ITEM_WIDTH}},React.createElement(TooltipHost,{content:e,overflowMode:TooltipOverflowMode.Parent},e)),void 0!==o&&React.createElement("span",{className:"badge"},o))},e.prototype._renderSeparator=function(t,e){var i=this.state.commands,o=i&&i.some(function(t){return t.length>0});return(t||e)&&o?React.createElement("div",{className:"vss-PivotBar--separator"}):null},e.prototype._renderCommandBar=function(t,e){var i=this;return React.createElement(PivotCommandBar,{componentRef:function(t){i._commandBar=t},className:"vss-PivotBar--commandBar",commands:this.state.commands,viewActions:this.state.viewActions,filterBar:t,showFilterAction:e,showFilterBarViewOptionKey:this.props.showFilterBarViewOptionKey,hasAppliedFilter:this.state.hasAppliedFilter,viewOptions:this.props.viewOptions,onShowFilterBarClicked:this._onShowFilterBarClicked})},e.prototype._renderContent=function(){for(var t=[],e=(this.state.selectedPivot||"").toUpperCase(),i=0,o=this.state.items;i<o.length;i++){var r=o[i],s=r.itemKey.toUpperCase(),n=e===s,a=!n&&r.deselectionBehavior===PivotBarItemDeselectionBehavior.Hide&&!0===this._pivotItemsRendered[s];(n||a)&&(t.push(React.createElement("div",{key:s,className:css("vss-PivotBar--content",{"hide-content":a}),role:"tabpanel","aria-labelledby":r.id},r&&(r.child||r.contributedItem.render(css("vss-PivotBarItem","content-host"))))),this._pivotItemsRendered[s]=!0)}return t},e.prototype._onShowFilterBarClicked=function(){this.setState({showFilterBar:!this.state.showFilterBar})},e.prototype._onFilterApplied=function(){var t=this.props.filter.hasChangesToReset();t!==this.state.hasAppliedFilter&&this.setState({hasAppliedFilter:t})},e.prototype._onContributedPivotsChanged=function(){this.setState({items:this._getPivotBarItems(this.props)}),this._pivotSelected||this.setState(this._buildInitialPivotState())},e.prototype._onViewOptionChanged=function(t){var e=this.props.showFilterBarViewOptionKey,i=this.state.viewActions,o=e in t;if(!o){var r=[];i&&i.forEach(function(t){return r.push.apply(r,t.items)});for(var s in t){if("break"===function(t){if(findIndex(r,function(e){return e.key===t})>=0)return o=!0,"break"}(s))break}}o&&this.forceUpdate()},e.prototype._makeIPivotBarItemFromContribution=function(t,e){return{contributedItem:t,id:this._makeContributedPivotBarItemId(t,e),itemKey:t.itemKey||t.id,name:t.text,ariaLabel:null,commandProviders:t.commandProviders,viewActionProviders:t.viewActionProviders}},e.prototype._makePivotBarItemId=function(t){return this._id+"-Tab"+t.index},e.prototype._makeContributedPivotBarItemId=function(t,e){return this._id+"-ContributedTab"+e},e.prototype._getPivotBarItemByItemKey=function(t,e){void 0===e&&(e=this.state.items);var i=(t||"").toUpperCase(),o=findIndex(e,function(t){return t.itemKey.toUpperCase()===i});return o>=0?e[o]:void 0},e.prototype._getPivotBarItems=function(t){for(var e=[],i=0,o=childrenOfType(t.children,PivotBarItem);i<o.length;i++){var r=o[i],s=r.item.props;s.hidden||e.push({child:r.item,id:this._makePivotBarItemId(r),itemKey:s.itemKey,name:s.name,ariaLabel:s.ariaLabel,iconProps:s.iconProps,badgeCount:s.badgeCount,maxItemWidth:s.maxItemWidth,commands:s.commands,viewActions:s.viewActions,commandProviders:s.commandProviders,viewActionProviders:s.viewActionProviders,deselectionBehavior:s.deselectionBehavior,url:s.url})}return this._contributedPivots.forEach(function(t){return e.push.apply(e,t.items)}),e},e.prototype._setupPivotObservables=function(t){var e=this,i=0,o=this._subscribedToPivotObservables;o&&this._unsubscribeFromPivotObservables(),this._contributedPivots=[],t.pivotProviders&&(t.pivotProviders.forEach(function(t){var o=new ContributedItemArray(t,function(t){return e._makeIPivotBarItemFromContribution(t,i++)});e._contributedPivots.push(o)}),o&&this._subscribeToPivotObservables())},e.prototype._unsubscribeFromPivotObservables=function(){var t=this;this._contributedPivots.forEach(function(e){return e.unsubscribe(t._onContributedPivotsChanged)}),this._subscribedToPivotObservables=!1},e.prototype._subscribeToPivotObservables=function(){var t=this;this._contributedPivots.forEach(function(e){return e.subscribe(t._onContributedPivotsChanged)}),this._subscribedToPivotObservables=!0},e.prototype._getFilterBarSettings=function(t){var e,i=this.props,o=i.onRenderFilterBar,r=i.showFilterBarInline;if(o&&(e=o()),!e){var s=findIndex(t,function(t){return"object"==typeof t&&t.type===FilterBar});if(s>=0){var n=t[s],a=React.Children.toArray(n.props.children);if(a&&a.length>=1&&(e=n,1===a.length&&!r)){var l=a[0];"object"==typeof l&&l.type===KeywordFilterBarItem&&(r=!0)}}}if(e)return{filterBarElement:e,showInline:r}},e.prototype._getHubTileRegionIndex=function(t){return findIndex(t,function(t){return"object"==typeof t&&t.type===HubTileRegion})},e.prototype._isKeyValid=function(t){return void 0!==t&&void 0!==this._getPivotBarItemByItemKey(t)},e.prototype._buildInitialPivotState=function(t,e,i){var o=this;void 0===t&&(t=this.props),void 0===i&&(i=!1);var r=t.initialSelectedPivot;return this._isKeyValid(r)||(r=t.selectedPivot),this._isKeyValid(r)||(r=null,this._contributedPivotWait||(this._contributedPivotWait=setTimeout(function(){if(!o._pivotSelected){var i=e||o._getPivotBarItems(t);i.length&&(r=i[0].itemKey,o._updateSelectedItem(r,null))}o._contributedPivotWait=null},MAX_PIVOT_WAIT))),this._pivotSelected=null!==r,this._buildNewPivotState(t,r,e,i)},e.prototype._buildNewPivotState=function(t,e,i,o){void 0===o&&(o=!1);var r=this._getPivotBarItemByItemKey(e,i),s=e&&r;return{selectedPivot:s?r.itemKey:"",selectedPivotId:s?r.id:"",commands:s?this._actionsManager.getCommandObservables(t.commands,r,o):[],viewActions:s?this._actionsManager.getViewActionObservables(t.viewActions,r,o):[]}},e.prototype._onPivotClick=function(t,e){var i=!0;if(e.ctrlKey){var o=this._getPivotBarItemByItemKey(t);o&&o.url&&("string"==typeof o.url||o.url.value)&&(i=!1)}i&&(e.preventDefault(),this._updateSelectedItem(t,e))},e.prototype._onKeyPress=function(t,e){e.preventDefault(),13===e.which&&this._updateSelectedItem(t,e)},e.prototype._updateSelectedItem=function(t,e){var i=this.props;this._pivotSelected=!0,this.setState(this._buildNewPivotState(i,t)),i.onPivotClicked&&i.onPivotClicked(e,t)},tslib_1.__decorate([autobind],e.prototype,"_renderPivotItem",null),tslib_1.__decorate([autobind],e.prototype,"_onShowFilterBarClicked",null),tslib_1.__decorate([autobind],e.prototype,"_onFilterApplied",null),tslib_1.__decorate([autobind],e.prototype,"_onContributedPivotsChanged",null),tslib_1.__decorate([autobind],e.prototype,"_onViewOptionChanged",null),tslib_1.__decorate([autobind],e.prototype,"_makeIPivotBarItemFromContribution",null),e}(BaseComponent);export{PivotBar};var PivotActionsManager=function(){function t(){this._commands={},this._viewActions={}}return t.prototype.getCommandObservables=function(t,e,i){void 0===i&&(i=!1);var o=e.id;if(!0===i&&delete this._commands[o],!this._commands[o]){var r=[];this._commands[o]=r,r.push(ObservableLike.isObservable(t)?t:new ObservableArray(t)),r.push(ObservableLike.isObservable(e.commands)?e.commands:new ObservableArray(e.commands)),e.commandProviders&&e.commandProviders.forEach(function(t){var e=new ContributedItemArray(t,function(t){return t});r.push(e)})}return this._commands[o]},t.prototype.getViewActionObservables=function(t,e,i){void 0===i&&(i=!1);var o=e.id;if(!0===i&&delete this._viewActions[o],!this._viewActions[o]){var r=[];this._viewActions[o]=r,r.push(ObservableLike.isObservable(e.viewActions)?e.viewActions:new ObservableArray(e.viewActions)),e.viewActionProviders&&e.viewActionProviders.forEach(function(t){var e=new ContributedItemArray(t,function(t){return t});r.push(e)}),r.push(ObservableLike.isObservable(t)?t:new ObservableArray(t))}return this._viewActions[o]},t.prototype.dispose=function(){this._commands=null,this._viewActions=null},t}();
+import*as tslib_1 from"tslib";import*as React from"react";import{autobind,BaseComponent,css,getId,findIndex}from"office-ui-fabric-react/lib/Utilities";import{FocusZone,FocusZoneDirection}from"office-ui-fabric-react/lib/FocusZone";import{CommandButton}from"office-ui-fabric-react/lib/Button";import{TooltipHost,TooltipOverflowMode}from"office-ui-fabric-react/lib/Tooltip";import{Dropdown}from"office-ui-fabric-react/lib/Dropdown";import{childrenOfType}from"../../Utilities/ChildrenUtils";import{PivotBarItem}from"../../Components/PivotBar/PivotBarItem";import{DynamicLink}from"../../Dynamic";import{HubTileRegion}from"../../HubHeader";import{FilterBar,KeywordFilterBarItem}from"../../FilterBar";import{FILTER_APPLIED_EVENT}from"../../Utilities/Filter";import{VssIcon}from"../../VssIcon";import{ObservableArray,ObservableLike}from"../../Utilities/Observable";import{ContributedItemArray}from"../../Utilities/ItemContribution";import{VIEW_OPTIONS_CHANGE_EVENT}from"../../Utilities/ViewOptions";import{arrayEquals}from"../../Utilities/Internal";import{PivotCommandBar}from"../../Components/PivotBar/PivotCommandBar";import"./PivotBar.css";var MAX_PIVOT_ITEM_WIDTH=340,MAX_PIVOT_WAIT=1e3,PivotBar=function(t){function e(e){var i=t.call(this,e)||this;return i._subscribedToPivotObservables=!1,i._pivotSelected=!1,i._pivotItemsRendered={},i._id=getId("PivotBar"),i._setupPivotObservables(i.props),i._actionsManager=new PivotActionsManager,i._disposables.push(i._actionsManager),i.state={items:i._getPivotBarItems(i.props)},i.state=tslib_1.__assign({hasAppliedFilter:!!i.props.filter&&i.props.filter.hasChangesToReset(),items:i.state.items},i._buildInitialPivotState()),i}return tslib_1.__extends(e,t),e.prototype.focus=function(t){if(this._commandBar)switch(t){case 0:this._commandBar.focus()}},e.prototype.componentWillReceiveProps=function(t){var e=this;arrayEquals(this.props.pivotProviders,t.pivotProviders)||this._setupPivotObservables(t);var i=this._getPivotBarItems(t);this.setState(function(o,r){return tslib_1.__assign({items:i},e._buildInitialPivotState(t,i,!0))})},e.prototype.componentDidMount=function(){this.props.viewOptions&&this.props.showFilterBarViewOptionKey&&this._events.on(this.props.viewOptions,VIEW_OPTIONS_CHANGE_EVENT,this._onViewOptionChanged),this.props.filter&&this._events.on(this.props.filter,FILTER_APPLIED_EVENT,this._onFilterApplied),this._subscribeToPivotObservables()},e.prototype.componentDidUpdate=function(){this.props.onRenderComplete&&this.props.onRenderComplete()},e.prototype.componentWillUnmount=function(){this.props.viewOptions&&this.props.showFilterBarViewOptionKey&&this._events.off(this.props.viewOptions,VIEW_OPTIONS_CHANGE_EVENT,this._onViewOptionChanged),this.props.filter&&this._events.off(this.props.filter,FILTER_APPLIED_EVENT,this._onFilterApplied),this._contributedPivotWait&&(clearTimeout(this._contributedPivotWait),this._contributedPivotWait=null),this._unsubscribeFromPivotObservables()},e.prototype.render=function(){var t=this.props,e=t.className,i=t.filter,o=t.showPivots,r=t.showFilterBarViewOptionKey,s=t.filterBarClassName,n=t.pivotRenderingModeOptions,a=this.state,l=(a.selectedPivotId,a.showFilterBar),p=React.Children.toArray(this.props.children)||[],c=p.filter(function(t){return"object"!=typeof t||t.type!==PivotBarItem&&t.type!==FilterBar&&t.type!==HubTileRegion}),d=null,v=this._getHubTileRegionIndex(p);v>-1&&(d=p[v]);var m=null,u=v>-1;void 0===o?o=this.state.items&&this.state.items.length>1:u=u&&o,o&&(m=this._renderPivotItems(n));var h=!o&&!u,b=h?"vss-PivotBar--bar-one-line":"vss-PivotBar--bar-two-line";this.props.viewOptions&&r&&(l=this.props.viewOptions.getViewOption(r));var _,f=this._getFilterBarSettings(p),P=f&&f.showInline;f&&(l||f.showInline)&&(_=f.filterBarElement,_=React.cloneElement(_,{className:css(_.props.className,s),filter:_.props.filter||i,onMounted:function(t){P||t.focus()}}));var y=!(!m&&!h);return React.createElement("div",{className:css("vss-PivotBar",e)},React.createElement("div",{className:b},React.createElement("div",{className:"vss-PivotBar--header"},c,u&&d),React.createElement("div",{className:"vss-PivotBar--bar"},m,this._renderCommandBar(P?_:null,!!f,y))),P?null:_,this._renderContent())},e.prototype._renderPivotItems=function(t){return t&&1===t.mode?this._renderDropdown(t.props):this._renderHorizontalTabs()},e.prototype._renderDropdown=function(t){for(var e=[],i=0,o=this.state.items;i<o.length;i++){var r=o[i];e.push({key:r.itemKey,text:r.name})}return React.createElement(Dropdown,{className:"vss-PivotBar--dropdown",selectedKey:this.state.selectedPivot,options:e,onChanged:this._onDropDownSelected,dropdownWidth:t.dropdownWidth})},e.prototype._onDropDownSelected=function(t){var e=t.key;this._updateSelectedItem(e,null)},e.prototype._renderHorizontalTabs=function(){return React.createElement(FocusZone,{className:"vss-PivotBar--pivots",role:"tablist",direction:FocusZoneDirection.horizontal},this.state.items&&this.state.items.map(this._renderPivotItem))},e.prototype._renderPivotItem=function(t,e){var i=t.itemKey,o=this.state.selectedPivot===i;return React.createElement(DynamicLink,{url:t.url,className:css("vss-PivotBar--itemLink",t.child&&t.child.props.headerClassName),tabIndex:-1,role:"presentation","data-is-focusable":!1,key:i},React.createElement(CommandButton,{id:t.id,className:css("vss-PivotBar--button",o?"selected":""),onClick:this._onPivotClick.bind(this,i),onKeyPress:this._onKeyPress.bind(this,i),ariaLabel:t.ariaLabel,role:"tab","aria-selected":o},this._renderPivotItemContent(t)))},e.prototype._renderPivotItemContent=function(t){var e=t.name,i=t.iconProps,o=t.badgeCount,r=t.maxItemWidth;return React.createElement("span",null,void 0!==i&&React.createElement(VssIcon,tslib_1.__assign({className:"icon"},i)),void 0!==e&&React.createElement("span",{className:"text",style:{maxWidth:r||MAX_PIVOT_ITEM_WIDTH}},React.createElement(TooltipHost,{content:e,overflowMode:TooltipOverflowMode.Parent},e)),void 0!==o&&React.createElement("span",{className:"badge"},o))},e.prototype._renderCommandBar=function(t,e,i){var o=this;return React.createElement(PivotCommandBar,{componentRef:function(t){o._commandBar=t},className:"vss-PivotBar--commandBar",commands:this.state.commands,viewActions:this.state.viewActions,filterBar:t,showFilterAction:e,showFilterBarViewOptionKey:this.props.showFilterBarViewOptionKey,hasAppliedFilter:this.state.hasAppliedFilter,prependSeparator:i,viewOptions:this.props.viewOptions,onShowFilterBarClicked:this._onShowFilterBarClicked})},e.prototype._renderContent=function(){for(var t=[],e=(this.state.selectedPivot||"").toUpperCase(),i=0,o=this.state.items;i<o.length;i++){var r=o[i],s=r.itemKey.toUpperCase(),n=e===s,a=!n&&1===r.deselectionBehavior&&!0===this._pivotItemsRendered[s];(n||a)&&(t.push(React.createElement("div",{key:s,className:css("vss-PivotBar--content",{"hide-content":a}),role:"tabpanel","aria-labelledby":r.id},r&&(r.child||r.contributedItem.render(css("vss-PivotBarItem","content-host"))))),this._pivotItemsRendered[s]=!0)}return t},e.prototype._onShowFilterBarClicked=function(){this.setState({showFilterBar:!this.state.showFilterBar})},e.prototype._onFilterApplied=function(){var t=this.props.filter.hasChangesToReset();t!==this.state.hasAppliedFilter&&this.setState({hasAppliedFilter:t})},e.prototype._onContributedPivotsChanged=function(){this.setState({items:this._getPivotBarItems(this.props)}),this._pivotSelected||this.setState(this._buildInitialPivotState())},e.prototype._onViewOptionChanged=function(t){var e=this.props.showFilterBarViewOptionKey,i=this.state.viewActions,o=e in t;if(!o){var r=[];i&&i.forEach(function(t){return r.push.apply(r,t.items)});var s=function(t){if(findIndex(r,function(e){return e.key===t})>=0)return o=!0,"break"};for(var n in t){if("break"===s(n))break}}o&&this.forceUpdate()},e.prototype._makeIPivotBarItemFromContribution=function(t,e){return{contributedItem:t,id:this._makeContributedPivotBarItemId(t,e),itemKey:t.itemKey||t.id,name:t.text,ariaLabel:null,commandProviders:t.commandProviders,viewActionProviders:t.viewActionProviders,url:t.url}},e.prototype._makePivotBarItemId=function(t){return this._id+"-Tab"+t.index},e.prototype._makeContributedPivotBarItemId=function(t,e){return this._id+"-ContributedTab"+e},e.prototype._getPivotBarItemByItemKey=function(t,e){void 0===e&&(e=this.state.items);var i=(t||"").toUpperCase(),o=findIndex(e,function(t){return t.itemKey.toUpperCase()===i});return o>=0?e[o]:void 0},e.prototype._getPivotBarItems=function(t){for(var e=[],i=0,o=childrenOfType(t.children,PivotBarItem);i<o.length;i++){var r=o[i],s=r.item.props;s.hidden||e.push({child:r.item,id:this._makePivotBarItemId(r),itemKey:s.itemKey,name:s.name,ariaLabel:s.ariaLabel,iconProps:s.iconProps,badgeCount:s.badgeCount,maxItemWidth:s.maxItemWidth,commands:s.commands,viewActions:s.viewActions,commandProviders:s.commandProviders,viewActionProviders:s.viewActionProviders,deselectionBehavior:s.deselectionBehavior,url:s.url})}return this._contributedPivots.forEach(function(t){return e.push.apply(e,t.items)}),e},e.prototype._setupPivotObservables=function(t){var e=this,i=0,o=this._subscribedToPivotObservables;o&&this._unsubscribeFromPivotObservables(),this._contributedPivots=[],t.pivotProviders&&(t.pivotProviders.forEach(function(t){var o=new ContributedItemArray(t,function(t){return e._makeIPivotBarItemFromContribution(t,i++)});e._contributedPivots.push(o)}),o&&this._subscribeToPivotObservables())},e.prototype._unsubscribeFromPivotObservables=function(){var t=this;this._contributedPivots.forEach(function(e){return e.unsubscribe(t._onContributedPivotsChanged)}),this._subscribedToPivotObservables=!1},e.prototype._subscribeToPivotObservables=function(){var t=this;this._contributedPivots.forEach(function(e){return e.subscribe(t._onContributedPivotsChanged)}),this._subscribedToPivotObservables=!0},e.prototype._getFilterBarSettings=function(t){var e,i=this.props,o=i.onRenderFilterBar,r=i.showFilterBarInline;if(o&&(e=o()),!e){var s=findIndex(t,function(t){return"object"==typeof t&&t.type===FilterBar});if(s>=0){var n=t[s],a=React.Children.toArray(n.props.children);if(a&&a.length>=1&&(e=n,1===a.length&&!r)){var l=a[0];"object"==typeof l&&l.type===KeywordFilterBarItem&&(r=!0)}}}if(e)return{filterBarElement:e,showInline:r}},e.prototype._getHubTileRegionIndex=function(t){return findIndex(t,function(t){return"object"==typeof t&&t.type===HubTileRegion})},e.prototype._isKeyValid=function(t){return void 0!==t&&void 0!==this._getPivotBarItemByItemKey(t)},e.prototype._buildInitialPivotState=function(t,e,i){var o=this;void 0===t&&(t=this.props),void 0===i&&(i=!1);var r=t.initialSelectedPivot;return this._isKeyValid(r)||(r=t.selectedPivot),this._isKeyValid(r)||(r=null,this._contributedPivotWait||(this._contributedPivotWait=setTimeout(function(){if(!o._pivotSelected){var i=e||o._getPivotBarItems(t);i.length&&(r=i[0].itemKey,o._updateSelectedItem(r,null))}o._contributedPivotWait=null},MAX_PIVOT_WAIT))),this._pivotSelected=null!==r,this._buildNewPivotState(t,r,e,i)},e.prototype._buildNewPivotState=function(t,e,i,o){void 0===o&&(o=!1);var r=this._getPivotBarItemByItemKey(e,i),s=e&&r;return{selectedPivot:s?r.itemKey:"",selectedPivotId:s?r.id:"",commands:s?this._actionsManager.getCommandObservables(t.commands,r,o):[],viewActions:s?this._actionsManager.getViewActionObservables(t.viewActions,r,o):[]}},e.prototype._onPivotClick=function(t,e){var i=!0;if(e.ctrlKey){var o=this._getPivotBarItemByItemKey(t);o&&o.url&&("string"==typeof o.url||o.url.value)&&(i=!1)}i&&(e.preventDefault(),this._updateSelectedItem(t,e))},e.prototype._onKeyPress=function(t,e){e.preventDefault(),13===e.which&&this._updateSelectedItem(t,e)},e.prototype._updateSelectedItem=function(t,e){var i=this.props;this._pivotSelected=!0,this.setState(this._buildNewPivotState(i,t)),i.onPivotClicked&&i.onPivotClicked(e,t)},tslib_1.__decorate([autobind],e.prototype,"_onDropDownSelected",null),tslib_1.__decorate([autobind],e.prototype,"_renderPivotItem",null),tslib_1.__decorate([autobind],e.prototype,"_onShowFilterBarClicked",null),tslib_1.__decorate([autobind],e.prototype,"_onFilterApplied",null),tslib_1.__decorate([autobind],e.prototype,"_onContributedPivotsChanged",null),tslib_1.__decorate([autobind],e.prototype,"_onViewOptionChanged",null),tslib_1.__decorate([autobind],e.prototype,"_makeIPivotBarItemFromContribution",null),e}(BaseComponent);export{PivotBar};var PivotActionsManager=function(){function t(){this._commands={},this._viewActions={}}return t.prototype.getCommandObservables=function(t,e,i){void 0===i&&(i=!1);var o=e.id;if(!0===i&&delete this._commands[o],!this._commands[o]){var r=[];this._commands[o]=r,r.push(ObservableLike.isObservable(t)?t:new ObservableArray(t)),r.push(ObservableLike.isObservable(e.commands)?e.commands:new ObservableArray(e.commands)),e.commandProviders&&e.commandProviders.forEach(function(t){var e=new ContributedItemArray(t,function(t){return t});r.push(e)})}return this._commands[o]},t.prototype.getViewActionObservables=function(t,e,i){void 0===i&&(i=!1);var o=e.id;if(!0===i&&delete this._viewActions[o],!this._viewActions[o]){var r=[];this._viewActions[o]=r,r.push(ObservableLike.isObservable(e.viewActions)?e.viewActions:new ObservableArray(e.viewActions)),e.viewActionProviders&&e.viewActionProviders.forEach(function(t){var e=new ContributedItemArray(t,function(t){return t});r.push(e)}),r.push(ObservableLike.isObservable(t)?t:new ObservableArray(t))}return this._viewActions[o]},t.prototype.dispose=function(){this._commands=null,this._viewActions=null},t}();

Components/PivotBar/PivotBarAction.d.ts

@@ -11,3 +11,3 @@ import { IChoiceGroupOption } from 'office-ui-fabric-react/lib/ChoiceGroup';
  */
-export declare enum PivotBarViewActionArea {
+export declare const enum PivotBarViewActionArea {
     /**
@@ -23,3 +23,3 @@ * By deafult, the view action will be rendered after the View Options built-in action
 }
-export declare enum PivotBarViewActionType {
+export declare const enum PivotBarViewActionType {
     /**
@@ -75,2 +75,6 @@ * Command action where it displays a text and an icon (optional).
     disabled?: boolean;
+    /**
+     * Determines if this action is a seperator, which will set the itemType to ContextualMenuItemType.Divider.
+     */
+    separator?: boolean;
 }
@@ -125,2 +129,10 @@ /**
     showText?: boolean;
+    /**
+     * Text to display when toggle is ON.
+     */
+    onText?: string;
+    /**
+     * Text to display when toggle is OFF.
+     */
+    offText?: string;
 }
@@ -170,4 +182,5 @@ export interface IChoiceGroupViewActionOption extends IChoiceGroupOption {
  * @param viewOptions View options to operate on.
+ * @param forceUpdate Callback to force a rerender of the visualizations
  */
-export declare function mapActionsToItems(actions: IPivotBarAction[], viewOptions?: IViewOptions): IContextualMenuItem[];
+export declare function mapActionsToItems(actions: IPivotBarAction[], viewOptions?: IViewOptions, forceUpdate?: () => void): IContextualMenuItem[];
 /**
@@ -174,0 +187,0 @@ * Converts an IContextualMenuItem to an IPivotBarAction

Components/PivotBar/PivotBarAction.js

@@ -1,1 +0,1 @@
-function mapActionsToVisualizations(t,e,i){for(var o=[],n=0,r=t||[];n<r.length;n++){var a=r[n],s=VisualizationRegistration.getInstance(e,a.actionType||PivotBarViewActionType.Command);o=o.concat(s.getVisualization(a,i))}return o}function setViewOption(t,e,i,o){t?t.setViewOption(e,i):"function"==typeof o&&o()}import*as tslib_1 from"tslib";import*as React from"react";import{CommandButton}from"office-ui-fabric-react/lib/Button";import{ContextualMenu,ContextualMenuItemType}from"office-ui-fabric-react/lib/ContextualMenu";import{FocusZone,FocusZoneDirection}from"office-ui-fabric-react/lib/FocusZone";import{IconType}from"office-ui-fabric-react/lib/Icon";import{Slider}from"office-ui-fabric-react/lib/Slider";import{Toggle}from"office-ui-fabric-react/lib/Toggle";import{autobind,BaseComponent,css,getRTL,findIndex}from"office-ui-fabric-react/lib/Utilities";import{DynamicText}from"../../Dynamic";import{VssIcon,VssIconType}from"../../VssIcon";import*as VSSUI_Resources from"../../Resources/VSS.Resources.VSSUI";var PivotBarActionArea;!function(t){t[t.Bar=0]="Bar",t[t.Overflow=1]="Overflow"}(PivotBarActionArea||(PivotBarActionArea={}));export var PivotBarViewActionArea;!function(t){t[t.default=0]="default",t[t.beforeViewOptions=1]="beforeViewOptions"}(PivotBarViewActionArea||(PivotBarViewActionArea={}));export var PivotBarViewActionType;!function(t){t[t.Command=0]="Command",t[t.OnOff=1]="OnOff",t[t.ChoiceGroup=2]="ChoiceGroup",t[t.Text=3]="Text",t[t.Slider=4]="Slider"}(PivotBarViewActionType||(PivotBarViewActionType={}));export function mapActionsToItems(t,e){return mapActionsToVisualizations(t,PivotBarActionArea.Bar,e)};export function mapItemToActions(t){var e=t.iconProps.iconType,i=e===IconType.default||e===IconType.Default?VssIconType.fabric:VssIconType.image,o={key:t.key,name:t.name,href:t.href,title:t.title,iconProps:tslib_1.__assign({},t.iconProps,{iconType:i}),onClick:t.onClick,disabled:t.disabled,important:t.important,target:t.target};return t.items&&(o.children=t.items.map(mapItemToActions)),o};var VisualizationRegistration;!function(t){function e(t,e){return t+":"+e}var i={};t.register=function(t,o,n){var r=e(t,o);i[r]=n},t.getInstance=function(t,o){var n=e(t,o),r=i[n];if(!r)throw new Error("No visualization found for area "+t+" and action type "+o);return new r}}(VisualizationRegistration||(VisualizationRegistration={}));var CommandVisualization=function(){function t(){}return t.prototype.getVisualization=function(t,e){var i={key:t.key,name:t.name||"",ariaLabel:t.ariaLabel,title:t.title,onClick:t.onClick,href:t.href,disabled:t.disabled,target:t.target};if(t.iconProps){var o=tslib_1.__assign({},t.iconProps);o.className=css(o.className,"vss-PivotBar--commandBar-icon"),i.iconProps=VssIcon.getIconProps(o)}return Array.isArray(t.children)&&(i.subMenuProps={className:"vss-PivotBar--commandBar-overflow",items:mapActionsToVisualizations(t.children,PivotBarActionArea.Overflow,e)}),[i]},t}();VisualizationRegistration.register(PivotBarActionArea.Bar,PivotBarViewActionType.Command,CommandVisualization),VisualizationRegistration.register(PivotBarActionArea.Overflow,PivotBarViewActionType.Command,CommandVisualization);var OnOffVisualization=function(){function t(){}return t.prototype.getVisualization=function(t,e){return[]},t.prototype.getActionProps=function(t){return t.actionProps||(t.actionProps={on:!1}),t.actionProps},t.prototype.isOn=function(t,e){return!!e&&!0===e.getViewOption(t)},t}(),OnOffBarVisualization=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return tslib_1.__extends(e,t),e.prototype.getVisualization=function(t,e){var i=this.getActionProps(t),o=this.isOn(t.key,e),n="";!1!==i.showText&&(n=o?VSSUI_Resources.PivotBarViewActionOnText:VSSUI_Resources.PivotBarViewActionOffText);var r={key:t.key,name:n,ariaLabel:o?i.onAriaLabel:i.offAriaLabel,title:t.title,disabled:t.disabled,onClick:function(i,n){setViewOption(e,n.key,!o,t.onClick)}};n||void 0!==r.title||(r.title=r.ariaLabel);var a=o?i.onIconProps:i.offIconProps;return a||(a=t.iconProps),a&&(r.iconProps=VssIcon.getIconProps(a)),[r]},e}(OnOffVisualization);VisualizationRegistration.register(PivotBarActionArea.Bar,PivotBarViewActionType.OnOff,OnOffBarVisualization);var OnOffOverflowVisualization=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return tslib_1.__extends(e,t),e.prototype.getVisualization=function(t,e){var i=this.getActionProps(t),o=this.isOn(t.key,e),n=[];return t.name&&n.push({key:t.key+"-header",name:t.name,itemType:ContextualMenuItemType.Header}),n.push({key:t.key,onRender:function(n){return React.createElement(Toggle,{key:t.key+"-toggle",className:"vss-PivotBar--commandBar-toggle",styles:{root:{paddingLeft:8,marginTop:4},container:{alignItems:"center"},pill:{fontSize:"15px"}},defaultChecked:o,disabled:t.disabled,onText:VSSUI_Resources.PivotBarViewActionOnText,offText:VSSUI_Resources.PivotBarViewActionOffText,onAriaLabel:i.onAriaLabel,offAriaLabel:i.offAriaLabel,title:t.title,onChanged:function(i){setViewOption(e,n.key,i,t.onClick)}})}}),n},e}(OnOffVisualization);VisualizationRegistration.register(PivotBarActionArea.Overflow,PivotBarViewActionType.OnOff,OnOffOverflowVisualization);var ChoiceGroupVisualization=function(){function t(){}return t.prototype.getVisualization=function(t,e){return[]},t.prototype.getActionProps=function(t){if(!t.actionProps)throw new Error("Options must be specified for the choice group "+t.key);return t.actionProps},t.prototype.getSelectedOption=function(t,e,i){var o=i?i.getViewOption(t):null;return e.options.filter(function(t){return t.key===o})[0]||e.options[0]},t}(),ChoiceGroupButton=function(t){function e(e){var i=t.call(this,e)||this;return i.state={showDropdown:!1,selectedOptionIndex:i._getSelectedOptionIndex(i.props.options,i.props.defaultSelectedKey)},i}return tslib_1.__extends(e,t),e.prototype.componentWillReceiveProps=function(t){this.setState({showDropdown:!1,selectedOptionIndex:this._getSelectedOptionIndex(t.options,t.defaultSelectedKey)})},e.prototype.render=function(){var t=this,e=this.props,i=e.cycleButtonClassName,o=e.dropButtonClassName,n=e.separatorClassName,r=e.ariaLabel,a=e.dropButtonAriaLabel,s=e.options,c=this.state,u=c.selectedOptionIndex,l=c.showDropdown,p=c.dropTarget,f=s[u];return React.createElement("div",{className:"vss-ChoiceGroupButton"},React.createElement(CommandButton,{ariaLabel:r,className:css("vss-ChoiceGroupButton--text",i),onClick:this._onCycleClick},f.text),React.createElement("span",{className:css("vss-ChoiceGroupButton--separator",n)}),React.createElement(CommandButton,{ariaLabel:a||VSSUI_Resources.PivotBarMoreOptionsAriaLabel,className:css("vss-ChoiceGroupButton--drop",o),iconProps:{iconName:"ChevronDown"},onClick:this._onDropClick}),l?React.createElement(ContextualMenu,{shouldFocusOnMount:!0,isBeakVisible:!1,target:p,onDismiss:this._onDismiss,directionalHint:getRTL()?4:6,items:s.map(function(e){return{key:e.key,name:e.text,ariaLabel:e.ariaLabel,iconProps:e===f?{iconName:"CheckMark"}:void 0,onClick:t._onOptionClick}})}):null)},e.prototype._getSelectedOptionIndex=function(t,e){void 0===e&&(e=null);var i=e?findIndex(t,function(t){return t.key===e}):-1;return Math.max(i,0)},e.prototype._getNextOptionIndex=function(t){var e=this.state.selectedOptionIndex+1;return e===t.length&&(e=0),e},e.prototype._changeOption=function(t,e){var i=this.props,o=i.onChange,n=i.options;this.setState({selectedOptionIndex:e}),o&&o(t,n[e])},e.prototype._onCycleClick=function(t){this._changeOption(t,this._getNextOptionIndex(this.props.options))},e.prototype._onOptionClick=function(t,e){t.stopPropagation(),this._changeOption(t,findIndex(this.props.options,function(t){return t.key===e.key}))},e.prototype._onDropClick=function(t){this.setState({showDropdown:!0,dropTarget:t.currentTarget})},e.prototype._onDismiss=function(t){this.setState({showDropdown:!1})},tslib_1.__decorate([autobind],e.prototype,"_onCycleClick",null),tslib_1.__decorate([autobind],e.prototype,"_onOptionClick",null),tslib_1.__decorate([autobind],e.prototype,"_onDropClick",null),tslib_1.__decorate([autobind],e.prototype,"_onDismiss",null),e}(BaseComponent),ChoiceGroupBarVisualization=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return tslib_1.__extends(e,t),e.prototype.getVisualization=function(t,e){var i=this.getActionProps(t),o=this.getSelectedOption(t.key,i,e);return[{key:t.key,className:"vss-PivotBar--commandBar-barChoiceGroup",onRender:function(n){return React.createElement(ChoiceGroupButton,{ariaLabel:n.ariaLabel,dropButtonAriaLabel:i.dropButtonAriaLabel,defaultSelectedKey:o.key,options:i.options,cycleButtonClassName:"vss-PivotBar--commandBar-barChoiceCycle",dropButtonClassName:"vss-PivotBar--commandBar-barChoiceDrop",onChange:function(i,o){setViewOption(e,t.key,o.key,t.onClick)}})}}]},e}(ChoiceGroupVisualization);VisualizationRegistration.register(PivotBarActionArea.Bar,PivotBarViewActionType.ChoiceGroup,ChoiceGroupBarVisualization);var ChoiceGroupOverflowVisualization=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return tslib_1.__extends(e,t),e.prototype.getVisualization=function(t,e){var i=this.getActionProps(t),o=this.getSelectedOption(t.key,i,e),n=[];t.name&&n.push({key:t.key+"-header",name:t.name,itemType:ContextualMenuItemType.Header});for(var r=0,a=i.options;r<a.length;r++){var s=a[r];n.push({key:s.key,name:s.text,ariaLabel:s.ariaLabel,iconProps:s===o?{iconName:"CheckMark"}:void 0,onClick:function(i,o){setViewOption(e,t.key,o.key,t.onClick)}})}return n},e}(ChoiceGroupVisualization);VisualizationRegistration.register(PivotBarActionArea.Overflow,PivotBarViewActionType.ChoiceGroup,ChoiceGroupOverflowVisualization);var TextVisualization=function(){function t(){}return t.prototype.getActionProps=function(t){var e=t.actionProps;if(!e||!e.text)throw new Error("Text must be specified through actionProps for "+t.key);return e},t.prototype.getVisualization=function(t,e){var i=this.getActionProps(t);return[{key:t.key,className:"vss-PivotBar--commandBar-text",onRender:function(e){return React.createElement(DynamicText,{key:t.key+"-text",text:i.text})}}]},t}();VisualizationRegistration.register(PivotBarActionArea.Bar,PivotBarViewActionType.Text,TextVisualization),VisualizationRegistration.register(PivotBarActionArea.Overflow,PivotBarViewActionType.Text,TextVisualization);var PivotBarSlider=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return tslib_1.__extends(e,t),e.prototype.render=function(){var t=this;return React.createElement("div",{ref:function(e){return t._outerFocus=e},onKeyDown:this._onOuterKeyDown,"data-is-focusable":!0,className:"vss-PivotBarSlider"},React.createElement(FocusZone,{componentRef:function(e){return t._innerFocus=e},onKeyDown:this._onInnerKeyDown,direction:FocusZoneDirection.horizontal},React.createElement(Slider,tslib_1.__assign({},this.props))))},e.prototype._onOuterKeyDown=function(t){13===t.which&&this._innerFocus&&(this._innerFocus.focus(),t.preventDefault(),t.stopPropagation())},e.prototype._onInnerKeyDown=function(t){27===t.which&&this._outerFocus&&(this._outerFocus.focus(),t.preventDefault(),t.stopPropagation())},tslib_1.__decorate([autobind],e.prototype,"_onOuterKeyDown",null),tslib_1.__decorate([autobind],e.prototype,"_onInnerKeyDown",null),e}(BaseComponent),SliderVisualization=function(){function t(){}return t.prototype.getActionProps=function(t){return t.actionProps||(t.actionProps={}),t.actionProps},t.prototype.getValue=function(t,e){return e?e.getViewOption(t)||0:0},Object.defineProperty(t.prototype,"useLabel",{get:function(){return!0},enumerable:!0,configurable:!0}),t.prototype.getVisualization=function(t,e){var i=this,o=this.getActionProps(t),n=this.getValue(t.key,e);return[{key:t.key,className:"vss-PivotBar--commandBar-barSlider",onRender:function(r){return React.createElement(PivotBarSlider,{key:t.key+"-slider",className:"vss-PivotBar--commandBar-slider",label:i.useLabel?t.name:void 0,value:n,min:o.minValue,max:o.maxValue,step:o.step,ariaLabel:t.ariaLabel,showValue:!1,disabled:t.disabled,onChange:function(i){setViewOption(e,t.key,i,t.onClick)}})}}]},t}(),SliderBarVisualization=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return tslib_1.__extends(e,t),e}(SliderVisualization);VisualizationRegistration.register(PivotBarActionArea.Bar,PivotBarViewActionType.Slider,SliderBarVisualization);var SliderOverflowVisualization=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return tslib_1.__extends(e,t),Object.defineProperty(e.prototype,"useLabel",{get:function(){return!1},enumerable:!0,configurable:!0}),e.prototype.getVisualization=function(e,i){var o=t.prototype.getVisualization.call(this,e,i);return e.name&&o.unshift({key:e.key+"-header",name:e.name,itemType:ContextualMenuItemType.Header}),o},e}(SliderVisualization);VisualizationRegistration.register(PivotBarActionArea.Overflow,PivotBarViewActionType.Slider,SliderOverflowVisualization);
+function mapActionsToVisualizations(t,e,o,i){for(var n=[],r=0,a=t||[];r<a.length;r++){var s=a[r],c=VisualizationRegistration.getInstance(e,s.actionType||0);n=n.concat(c.getVisualization(s,o,i))}return n.forEach(function(t){t.className=css(t.className,commandBarItemClassName)}),n}function setViewOption(t,e,o,i,n){t?t.setViewOption(e,o):"function"==typeof n.onClick&&n.onClick(i,n)}import*as tslib_1 from"tslib";import*as React from"react";import{CommandButton}from"office-ui-fabric-react/lib/Button";import{ContextualMenu,ContextualMenuItemType}from"office-ui-fabric-react/lib/ContextualMenu";import{FocusZone,FocusZoneDirection}from"office-ui-fabric-react/lib/FocusZone";import{IconType}from"office-ui-fabric-react/lib/Icon";import{Slider}from"office-ui-fabric-react/lib/Slider";import{Toggle}from"office-ui-fabric-react/lib/Toggle";import{TooltipHost}from"office-ui-fabric-react/lib/Tooltip";import{autobind,BaseComponent,css,getRTL,findIndex}from"office-ui-fabric-react/lib/Utilities";import{DynamicText}from"../../Dynamic";import{VssIcon}from"../../VssIcon";import*as VSSUI_Resources from"../../Resources/VSS.Resources.VSSUI";var PivotBarActionArea,commandBarItemClassName="vss-PivotBar--commandBar-item";!function(t){t[t.Bar=0]="Bar",t[t.Overflow=1]="Overflow"}(PivotBarActionArea||(PivotBarActionArea={}));export function mapActionsToItems(t,e,o){return mapActionsToVisualizations(t,PivotBarActionArea.Bar,e,o)};export function mapItemToActions(t){var e=t.iconProps.iconType,o=e===IconType.default||e===IconType.Default?0:3,i={key:t.key,name:t.name,href:t.href,title:t.title,iconProps:tslib_1.__assign({},t.iconProps,{iconType:o}),onClick:t.onClick,disabled:t.disabled,important:t.important,target:t.target,separator:t.itemType===ContextualMenuItemType.Divider};return t.items&&(i.children=t.items.map(mapItemToActions)),i};var VisualizationRegistration;!function(t){function e(t,e){return t+":"+e}var o={};t.register=function(t,i,n){var r=e(t,i);o[r]=n},t.getInstance=function(t,i){var n=e(t,i),r=o[n];if(!r)throw new Error("No visualization found for area "+t+" and action type "+i);return new r}}(VisualizationRegistration||(VisualizationRegistration={}));var CommandVisualization=function(){function t(){}return t.prototype.getVisualization=function(t,e){var o={key:t.key,name:t.name||"",ariaLabel:t.ariaLabel,title:t.title,onClick:t.onClick,href:t.href,disabled:t.disabled,target:t.target,itemType:t.separator?ContextualMenuItemType.Divider:ContextualMenuItemType.Normal};if(t.iconProps){var i=tslib_1.__assign({},t.iconProps);i.className=css(i.className,"vss-PivotBar--commandBar-icon"),o.iconProps=VssIcon.getIconProps(i)}return Array.isArray(t.children)&&(o.subMenuProps={className:"vss-PivotBar--commandBar-overflow",items:mapActionsToVisualizations(t.children,PivotBarActionArea.Overflow,e)}),[o]},t}();VisualizationRegistration.register(PivotBarActionArea.Bar,0,CommandVisualization),VisualizationRegistration.register(PivotBarActionArea.Overflow,0,CommandVisualization);var OnOffVisualization=function(){function t(){}return t.prototype.getVisualization=function(t,e){return[]},t.prototype.getActionProps=function(t){return t.actionProps||(t.actionProps={on:!1}),t.actionProps},t.prototype.isOn=function(t,e){return!!e&&!0===e.getViewOption(t)},t}(),OnOffBarVisualization=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return tslib_1.__extends(e,t),e.prototype.getVisualization=function(t,e,o){var i=this,n=this.getActionProps(t),r=this.isOn(t.key,e),a="";!1!==n.showText&&(a=r?VSSUI_Resources.PivotBarViewActionOnText:VSSUI_Resources.PivotBarViewActionOffText);var s={key:t.key,name:a,ariaLabel:r?n.onAriaLabel:n.offAriaLabel,title:t.title,disabled:t.disabled,onClick:function(n,r){setViewOption(e,t.key,!i.isOn(t.key,e),n,t),o&&o()}};a||void 0!==s.title||(s.title=s.ariaLabel);var c=r?n.onIconProps:n.offIconProps;return c||(c=t.iconProps),c&&(s.iconProps=VssIcon.getIconProps(c)),[s]},e}(OnOffVisualization);VisualizationRegistration.register(PivotBarActionArea.Bar,1,OnOffBarVisualization);var OnOffOverflowVisualization=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return tslib_1.__extends(e,t),e.prototype.getVisualization=function(t,e){var o=this.getActionProps(t),i=this.isOn(t.key,e),n=[];return t.name&&n.push({key:t.key+"-header",name:t.name,itemType:ContextualMenuItemType.Header}),n.push({key:t.key,onRender:function(n){return React.createElement(Toggle,{key:t.key+"-toggle",className:"vss-PivotBar--commandBar-toggle",styles:{root:{paddingLeft:8,marginTop:4},container:{alignItems:"center"},pill:{fontSize:"15px"}},defaultChecked:i,disabled:t.disabled,onText:o.onText||VSSUI_Resources.PivotBarViewActionOnText,offText:o.offText||VSSUI_Resources.PivotBarViewActionOffText,onAriaLabel:o.onAriaLabel,offAriaLabel:o.offAriaLabel,title:t.title,onChanged:function(o){setViewOption(e,n.key,o,null,t)}})}}),n},e}(OnOffVisualization);VisualizationRegistration.register(PivotBarActionArea.Overflow,1,OnOffOverflowVisualization);var ChoiceGroupVisualization=function(){function t(){}return t.prototype.getVisualization=function(t,e){return[]},t.prototype.getActionProps=function(t){if(!t.actionProps)throw new Error("Options must be specified for the choice group "+t.key);return t.actionProps},t.prototype.getSelectedOption=function(t,e,o){var i=o?o.getViewOption(t):null;return e.options.filter(function(t){return t.key===i})[0]||e.options[0]},t}(),ChoiceGroupButton=function(t){function e(e){var o=t.call(this,e)||this;return o.state={showDropdown:!1,selectedOptionIndex:o._getSelectedOptionIndex(o.props.options,o.props.defaultSelectedKey)},o}return tslib_1.__extends(e,t),e.prototype.componentWillReceiveProps=function(t){this.setState({showDropdown:!1,selectedOptionIndex:this._getSelectedOptionIndex(t.options,t.defaultSelectedKey)})},e.prototype.render=function(){var t=this,e=this.props,o=e.cycleButtonClassName,i=e.dropButtonClassName,n=e.separatorClassName,r=e.ariaLabel,a=e.dropButtonAriaLabel,s=e.options,c=this.state,u=c.selectedOptionIndex,l=c.showDropdown,p=c.dropTarget,f=s[u];return React.createElement("div",{className:"vss-ChoiceGroupButton"},React.createElement(CommandButton,{ariaLabel:r,className:css("vss-ChoiceGroupButton--text",o),onClick:this._onCycleClick},f.text),React.createElement("span",{className:css("vss-ChoiceGroupButton--separator",n)}),React.createElement(CommandButton,{ariaLabel:a||VSSUI_Resources.PivotBarMoreOptionsAriaLabel,className:css("vss-ChoiceGroupButton--drop",i),iconProps:{iconName:"ChevronDown"},onClick:this._onDropClick}),l?React.createElement(ContextualMenu,{shouldFocusOnMount:!0,isBeakVisible:!1,target:p,onDismiss:this._onDismiss,directionalHint:getRTL()?4:6,items:s.map(function(e){return{key:e.key,name:e.text,ariaLabel:e.ariaLabel,iconProps:e===f?{iconName:"CheckMark"}:void 0,onClick:t._onOptionClick}})}):null)},e.prototype._getSelectedOptionIndex=function(t,e){void 0===e&&(e=null);var o=e?findIndex(t,function(t){return t.key===e}):-1;return Math.max(o,0)},e.prototype._getNextOptionIndex=function(t){var e=this.state.selectedOptionIndex+1;return e===t.length&&(e=0),e},e.prototype._changeOption=function(t,e){var o=this.props,i=o.onChange,n=o.options;this.setState({selectedOptionIndex:e}),i&&i(t,n[e])},e.prototype._onCycleClick=function(t){this._changeOption(t,this._getNextOptionIndex(this.props.options))},e.prototype._onOptionClick=function(t,e){t.stopPropagation(),this._changeOption(t,findIndex(this.props.options,function(t){return t.key===e.key}))},e.prototype._onDropClick=function(t){this.setState({showDropdown:!0,dropTarget:t.currentTarget})},e.prototype._onDismiss=function(t){this.setState({showDropdown:!1})},tslib_1.__decorate([autobind],e.prototype,"_onCycleClick",null),tslib_1.__decorate([autobind],e.prototype,"_onOptionClick",null),tslib_1.__decorate([autobind],e.prototype,"_onDropClick",null),tslib_1.__decorate([autobind],e.prototype,"_onDismiss",null),e}(BaseComponent),ChoiceGroupBarVisualization=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return tslib_1.__extends(e,t),e.prototype.getVisualization=function(t,e){var o=this.getActionProps(t),i=this.getSelectedOption(t.key,o,e);return[{key:t.key,className:"vss-PivotBar--commandBar-barChoiceGroup",onRender:function(n){return React.createElement(ChoiceGroupButton,{ariaLabel:n.ariaLabel,dropButtonAriaLabel:o.dropButtonAriaLabel,defaultSelectedKey:i.key,options:o.options,cycleButtonClassName:"vss-PivotBar--commandBar-barChoiceCycle",dropButtonClassName:"vss-PivotBar--commandBar-barChoiceDrop",onChange:function(o,i){setViewOption(e,t.key,i.key,o,t)}})}}]},e}(ChoiceGroupVisualization);VisualizationRegistration.register(PivotBarActionArea.Bar,2,ChoiceGroupBarVisualization);var ChoiceGroupOverflowVisualization=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return tslib_1.__extends(e,t),e.prototype.getVisualization=function(t,e){var o=this.getActionProps(t),i=this.getSelectedOption(t.key,o,e),n=[];t.name&&n.push({key:t.key+"-header",name:t.name,itemType:ContextualMenuItemType.Header});for(var r=0,a=o.options;r<a.length;r++){var s=a[r];n.push({key:s.key,name:s.text,ariaLabel:s.ariaLabel,iconProps:s===i?{iconName:"CheckMark"}:void 0,onClick:function(o,i){setViewOption(e,t.key,i.key,o,t)}})}return n},e}(ChoiceGroupVisualization);VisualizationRegistration.register(PivotBarActionArea.Overflow,2,ChoiceGroupOverflowVisualization);var TextVisualization=function(){function t(){}return t.prototype.getActionProps=function(t){var e=t.actionProps;if(!e||!e.text)throw new Error("Text must be specified through actionProps for "+t.key);return e},t.prototype.getVisualization=function(t,e){var o=this.getActionProps(t);return[{key:t.key,className:"vss-PivotBar--commandBar-text",onRender:function(e){return React.createElement(DynamicText,{key:t.key+"-text",text:o.text})}}]},t}();VisualizationRegistration.register(PivotBarActionArea.Bar,3,TextVisualization),VisualizationRegistration.register(PivotBarActionArea.Overflow,3,TextVisualization);var PivotBarSlider=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return tslib_1.__extends(e,t),e.prototype.render=function(){var t=this;return React.createElement(TooltipHost,{content:this.props.title},React.createElement("div",{ref:function(e){return t._outerFocus=e},onKeyDown:this._onOuterKeyDown,"data-is-focusable":!0,className:"vss-PivotBarSlider"},React.createElement(FocusZone,{componentRef:function(e){return t._innerFocus=e},onKeyDown:this._onInnerKeyDown,direction:FocusZoneDirection.horizontal},React.createElement(Slider,tslib_1.__assign({},this.props)))))},e.prototype._onOuterKeyDown=function(t){13===t.which&&this._innerFocus&&(this._innerFocus.focus(),t.preventDefault(),t.stopPropagation())},e.prototype._onInnerKeyDown=function(t){27===t.which&&this._outerFocus&&(this._outerFocus.focus(),t.preventDefault(),t.stopPropagation())},tslib_1.__decorate([autobind],e.prototype,"_onOuterKeyDown",null),tslib_1.__decorate([autobind],e.prototype,"_onInnerKeyDown",null),e}(BaseComponent),SliderVisualization=function(){function t(){}return t.prototype.getActionProps=function(t){return t.actionProps||(t.actionProps={}),t.actionProps},t.prototype.getValue=function(t,e){return e?e.getViewOption(t)||0:0},Object.defineProperty(t.prototype,"useLabel",{get:function(){return!0},enumerable:!0,configurable:!0}),t.prototype.getVisualization=function(t,e){var o=this,i=this.getActionProps(t),n=this.getValue(t.key,e);return[{key:t.key,className:"vss-PivotBar--commandBar-barSlider",onRender:function(r){return React.createElement(PivotBarSlider,{key:t.key+"-slider",className:"vss-PivotBar--commandBar-slider",label:o.useLabel?t.name:void 0,value:n,min:i.minValue,max:i.maxValue,step:i.step,ariaLabel:t.ariaLabel,title:t.title,showValue:!1,disabled:t.disabled,onChange:function(o){setViewOption(e,t.key,o,null,t)}})}}]},t}(),SliderBarVisualization=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return tslib_1.__extends(e,t),e}(SliderVisualization);VisualizationRegistration.register(PivotBarActionArea.Bar,4,SliderBarVisualization);var SliderOverflowVisualization=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return tslib_1.__extends(e,t),Object.defineProperty(e.prototype,"useLabel",{get:function(){return!1},enumerable:!0,configurable:!0}),e.prototype.getVisualization=function(e,o){var i=t.prototype.getVisualization.call(this,e,o);return e.name&&i.unshift({key:e.key+"-header",name:e.name,itemType:ContextualMenuItemType.Header}),i},e}(SliderVisualization);VisualizationRegistration.register(PivotBarActionArea.Overflow,4,SliderOverflowVisualization);

Components/PivotBar/PivotCommandBar.d.ts

@@ -17,3 +17,3 @@ /// <reference types="react" />
     private _unsubscribeItems(itemSources, observer);
-    render(): JSX.Element;
+    render(): JSX.Element | null;
     focus(): void;
@@ -24,2 +24,6 @@ private _getCommands(props);
     private _onViewActionsChanged();
+    /**
+     * Conveniently autobound forceUpdate method.
+     */
+    private _forceUpdate();
 }

Components/PivotBar/PivotCommandBar.js

@@ -1,1 +0,1 @@
-import*as tslib_1 from"tslib";import*as React from"react";import{CommandBar}from"office-ui-fabric-react/lib/CommandBar";import{autobind,BaseComponent,css}from"office-ui-fabric-react/lib/Utilities";import{mapActionsToItems,PivotBarViewActionType,PivotBarViewActionArea}from"../../Components/PivotBar/PivotBarAction";import{arrayEquals}from"../../Utilities/Internal";import*as VSSUI_Resources from"../../Resources/VSS.Resources.VSSUI";var PivotCommandBar=function(t){function i(i){var o=t.call(this,i)||this;return o.state={commands:o._getCommands(o.props),viewActions:o._getViewActions(o.props)},o}return tslib_1.__extends(i,t),i.prototype.componentWillReceiveProps=function(t){var i=!1;arrayEquals(this.props.commands,t.commands)||(this._unsubscribeItems(this.props.commands,this._onCommandsChanged),this._subscribeItems(t.commands,this._onCommandsChanged),i=!0),arrayEquals(this.props.viewActions,t.viewActions)||(this._unsubscribeItems(this.props.viewActions,this._onViewActionsChanged),this._subscribeItems(t.viewActions,this._onViewActionsChanged),i=!0),this.props.showFilterAction===t.showFilterAction&&this.props.filterBar===t.filterBar||(i=!0),i&&this.setState({commands:this._getCommands(t),viewActions:this._getViewActions(t)})},i.prototype.componentDidMount=function(){this._subscribeItems(this.props.commands,this._onCommandsChanged),this._subscribeItems(this.props.viewActions,this._onViewActionsChanged)},i.prototype.componentWillUnmount=function(){this._unsubscribeItems(this.props.commands,this._onCommandsChanged),this._unsubscribeItems(this.props.viewActions,this._onViewActionsChanged)},i.prototype._subscribeItems=function(t,i){(t||[]).forEach(function(t){return t.subscribe(i)})},i.prototype._unsubscribeItems=function(t,i){(t||[]).forEach(function(t){return t.unsubscribe(i)})},i.prototype.render=function(){var t=this,i=this.props,o=i.className,e=i.viewOptions,n=i.filterBar,s=i.hasAppliedFilter,r=i.showFilterAction,a=i.onShowFilterBarClicked,c=i.showFilterBarViewOptionKey,m=this.state,p=m.commands,h=m.viewActions,u=[],l=[];if(p&&p.length){var f=p.filter(function(t){return t.important}),d=p.filter(function(t){return!t.important});u=mapActionsToItems(f,e),l=mapActionsToItems(d,e)}var A=[],_=[];if(h&&h.length&&_.push.apply(_,h.filter(function(t){return t.important&&t.viewActionRenderArea===PivotBarViewActionArea.beforeViewOptions})),h&&h.length){var v=h.filter(function(t){return!t.important});v.length&&_.push({key:"viewOptions",name:VSSUI_Resources.PivotBarViewOptionsText,important:!0,actionType:PivotBarViewActionType.Command,iconProps:{iconName:"Equalizer"},children:v})}if(h&&h.length&&_.push.apply(_,h.filter(function(t){return t.important&&t.viewActionRenderArea!==PivotBarViewActionArea.beforeViewOptions})),r&&!n){var w=Math.max(_.length-1,0);_.splice(w,0,{key:c,important:!0,actionType:PivotBarViewActionType.OnOff,actionProps:{showText:!1,onAriaLabel:VSSUI_Resources.PivotBarFilterActionTextHide,offAriaLabel:VSSUI_Resources.PivotBarFilterActionTextShow,onIconProps:{iconName:s?"FilterSolid":"Filter"},offIconProps:{iconName:s?"FilterSolid":"Filter"}},onClick:a})}return A=mapActionsToItems(_,e),n&&A.unshift({className:"vss-PivotBar--inlineFilterBar",key:"filterBar",onRender:function(){return n}}),u.length||l.length||A.length?React.createElement(CommandBar,{componentRef:function(i){t._commandBar=i},className:css(o),items:u,overflowItems:l,farItems:A,elipisisAriaLabel:VSSUI_Resources.PivotBarMoreCommandsAriaLabel}):null},i.prototype.focus=function(){this._commandBar&&this._commandBar.focus()},i.prototype._getCommands=function(t){for(var i=[],o=0,e=t.commands||[];o<e.length;o++){var n=e[o];i.push.apply(i,n.items)}return i},i.prototype._getViewActions=function(t){for(var i=[],o=0,e=t.viewActions||[];o<e.length;o++){var n=e[o];i.push.apply(i,n.items)}return i},i.prototype._onCommandsChanged=function(){this.setState({commands:this._getCommands(this.props)})},i.prototype._onViewActionsChanged=function(){this.setState({viewActions:this._getViewActions(this.props)})},tslib_1.__decorate([autobind],i.prototype,"_onCommandsChanged",null),tslib_1.__decorate([autobind],i.prototype,"_onViewActionsChanged",null),i}(BaseComponent);export{PivotCommandBar};
+import*as tslib_1 from"tslib";import*as React from"react";import{CommandBar}from"office-ui-fabric-react/lib/CommandBar";import{autobind,BaseComponent,css}from"office-ui-fabric-react/lib/Utilities";import{mapActionsToItems}from"../../Components/PivotBar/PivotBarAction";import{arrayEquals}from"../../Utilities/Internal";import*as VSSUI_Resources from"../../Resources/VSS.Resources.VSSUI";var PivotCommandBar=function(t){function e(e){var o=t.call(this,e)||this;return o.state={commands:o._getCommands(o.props),viewActions:o._getViewActions(o.props)},o}return tslib_1.__extends(e,t),e.prototype.componentWillReceiveProps=function(t){var e=!1;arrayEquals(this.props.commands,t.commands)||(this._unsubscribeItems(this.props.commands,this._onCommandsChanged),this._subscribeItems(t.commands,this._onCommandsChanged),e=!0),arrayEquals(this.props.viewActions,t.viewActions)||(this._unsubscribeItems(this.props.viewActions,this._onViewActionsChanged),this._subscribeItems(t.viewActions,this._onViewActionsChanged),e=!0),this.props.showFilterAction===t.showFilterAction&&this.props.filterBar===t.filterBar||(e=!0),e&&this.setState({commands:this._getCommands(t),viewActions:this._getViewActions(t)})},e.prototype.componentDidMount=function(){this._subscribeItems(this.props.commands,this._onCommandsChanged),this._subscribeItems(this.props.viewActions,this._onViewActionsChanged)},e.prototype.componentWillUnmount=function(){this._unsubscribeItems(this.props.commands,this._onCommandsChanged),this._unsubscribeItems(this.props.viewActions,this._onViewActionsChanged)},e.prototype._subscribeItems=function(t,e){(t||[]).forEach(function(t){return t.subscribe(e)})},e.prototype._unsubscribeItems=function(t,e){(t||[]).forEach(function(t){return t.unsubscribe(e)})},e.prototype.render=function(){var t=this,e=this.props,o=e.className,i=e.viewOptions,s=e.filterBar,n=e.hasAppliedFilter,r=e.showFilterAction,a=e.onShowFilterBarClicked,c=e.showFilterBarViewOptionKey,m=e.prependSeparator,p=this.state,h=p.commands,l=p.viewActions,u=[],d=[];if(h&&h.length){var f=h.filter(function(t){return t.important}),_=h.filter(function(t){return!t.important});u=mapActionsToItems(f,i,this._forceUpdate),d=mapActionsToItems(_,i,this._forceUpdate)}var v=[],b=[];if(l&&l.length&&b.push.apply(b,l.filter(function(t){return t.important&&1===t.viewActionRenderArea})),l&&l.length){var A=l.filter(function(t){return!t.important});A.length&&b.push({key:"viewOptions",name:VSSUI_Resources.PivotBarViewOptionsText,important:!0,actionType:0,iconProps:{iconName:"Equalizer"},children:A})}if(l&&l.length&&b.push.apply(b,l.filter(function(t){return t.important&&1!==t.viewActionRenderArea})),r&&!s){var w=Math.max(b.length-1,0);b.splice(w,0,{key:c,important:!0,actionType:1,actionProps:{showText:!1,onAriaLabel:VSSUI_Resources.PivotBarFilterActionTextHide,offAriaLabel:VSSUI_Resources.PivotBarFilterActionTextShow,onIconProps:{iconName:n?"FilterSolid":"Filter"},offIconProps:{iconName:n?"FilterSolid":"Filter"}},onClick:a})}return v=mapActionsToItems(b,i,this._forceUpdate),s&&v.unshift({className:"vss-PivotBar--inlineFilterBar",key:"filterBar",onRender:function(){return s}}),u.length||d.length||v.length?React.createElement("div",{className:"vss-PivotBar--right"},!(!m||!u.length&&!d.length)&&React.createElement("div",{className:"vss-PivotBar--separator"}),React.createElement(CommandBar,{componentRef:function(e){t._commandBar=e},className:css(o),items:u,overflowItems:d,farItems:v,elipisisAriaLabel:VSSUI_Resources.PivotBarMoreCommandsAriaLabel})):null},e.prototype.focus=function(){this._commandBar&&this._commandBar.focus()},e.prototype._getCommands=function(t){for(var e=[],o=0,i=t.commands||[];o<i.length;o++){var s=i[o];e.push.apply(e,s.items)}return e},e.prototype._getViewActions=function(t){for(var e=[],o=0,i=t.viewActions||[];o<i.length;o++){var s=i[o];e.push.apply(e,s.items)}return e},e.prototype._onCommandsChanged=function(){this.setState({commands:this._getCommands(this.props)})},e.prototype._onViewActionsChanged=function(){this.setState({viewActions:this._getViewActions(this.props)})},e.prototype._forceUpdate=function(){this.forceUpdate()},tslib_1.__decorate([autobind],e.prototype,"_onCommandsChanged",null),tslib_1.__decorate([autobind],e.prototype,"_onViewActionsChanged",null),tslib_1.__decorate([autobind],e.prototype,"_forceUpdate",null),e}(BaseComponent);export{PivotCommandBar};

Components/VssContextualMenu/VssContextualMenu.js

@@ -1,1 +0,1 @@
-import*as tslib_1 from"tslib";import*as React from"react";import*as ReactDOM from"react-dom";import{ContextualMenu,ContextualMenuItemType}from"office-ui-fabric-react/lib/ContextualMenu";import{css,autobind,BaseComponent,elementContains}from"office-ui-fabric-react/lib/Utilities";import"./VssContextualMenu.css";var VssContextualMenu=function(e){function t(){var t=e.call(this)||this;return t._invalidateItem=function(e){var i=!1;if(t.subMenuId){var n=t._findMenuItems(t.subMenuId),o=t._findItemIndex(n,e);i=t._focusItem(n,o-1)}if(!i){var n=t._findMenuItems(t.props.id),o=t._findItemIndex(n,e);(i=t._focusItem(n,o-1))||(o>0?i=t._focusItem(n,0):t._setTimeout(function(){var e=t._findMenuItems(t.props.id);t._focusItem(e,0)},0))}!i&&t._activeElement&&t.contains(document.activeElement)&&t._activeElement.focus()},t.timers=[],t._items=[],t._groups=[],t.state={displayItems:[]},t}return tslib_1.__extends(t,e),t.prototype.render=function(){if(this.state.loadingTimeout)return null;var e=this.state.displayItems,t=this.props,i=t.className,n=t.directionalHint,o=t.gapSpace,s=void 0===o?5:o,r=!(!this._items||!this._items.some(function(e){return!!e.icon||!!e.iconProps}));return this._items.forEach(function(e){e.menuHasIcons=r}),React.createElement(ContextualMenu,tslib_1.__assign({gapSpace:s,directionalHint:n},this.props,{items:e,className:css("vss-contextualMenu-list",i),onDismiss:this._onDismiss,onRenderSubMenu:this._onRenderSubMenu}))},t.prototype.componentWillMount=function(){var e=this,i=this._setTimeout(function(){e.setState({loadingTimeout:void 0})},100);this._items=this.props.items||[],this._groups=this.props.groups||[],this.setState({displayItems:this.props.items?this._arrangeItems(this.props.items):[],loadingTimeout:i}),this.props.isSubMenu||(t._activeMenu&&t._activeMenu.dismiss(null,!0),t._activeMenu=this),this._activeElement=document.activeElement},t.prototype.componentWillUnmount=function(){if(this._isMounted=!1,e.prototype.componentWillUnmount.call(this),this.state.loadingTimeout&&this._clearTimeout(this.state.loadingTimeout),this.timers){for(var i=0,n=this.timers;i<n.length;i++){var o=n[i];window.clearTimeout(o)}this.timers=[]}t._activeMenu===this&&delete t._activeMenu},t.prototype.componentDidMount=function(){var e=this;if(this._isMounted=!0,this.props.providers&&this.props.providers.length>0)for(var t=this.props.providers.map(function(e,t){return t}),i=this,n=0;n<this.props.providers.length;n++)!function(n){i.props.providers[n].loadItems(function(t,i,n){e._itemsChanged(t,i,n)},function(){if(e.state.loadingTimeout){var i=t.indexOf(n);i>-1&&(t.splice(i,1),e._isMounted&&0===t.length&&e.setState({loadingTimeout:void 0}))}})}(n);else this.setState({loadingTimeout:void 0});this.props.mouseLeaveDelayMs&&this._events.on(document.body,"mousemove",function(t){e.props.target.contains(t.target)||e.contains(t.target)?e.closeTimeout&&(e._clearTimeout(e.closeTimeout),delete e.closeTimeout):e.closeTimeout||(e.closeTimeout=e._setTimeout(function(){delete e.closeTimeout,e.dismiss(t,!0)},e.props.mouseLeaveDelayMs||0))}),this._events.on(document,"keydown",function(t){"`"!==t.key||t.defaultPrevented?16===t.which||17===t.which||18===t.which||e.props.isSubMenu||e.props.shouldFocusOnMount||e.contains(document.activeElement)||e.dismiss(t,!0):(e._forceGroupNames=!e._forceGroupNames,e.setState({displayItems:e._arrangeItems(e._items)}))})},t.prototype.componentWillReceiveProps=function(e){if(e.isSubMenu){var t=this.props.items.length!==e.items.length;t||(t=this.props.items.some(function(t){return!e.items.some(function(e){return e.key===t.key})})),t&&this.setState({displayItems:e.items?this._arrangeItems(e.items):[]})}},t.prototype.contains=function(e){return elementContains(ReactDOM.findDOMNode(this),e)||this._submenuComponent&&this._submenuComponent.contains(e)},t.prototype.dismiss=function(e,t){this.props.onDismiss&&this.props.onDismiss(e,!0)},t.prototype._arrangeItems=function(e,t){var i=e.some(function(e){return e.rank>=0}),n=e.some(function(e){return!!e.groupKey});return e=e.slice(),i&&this._sortItems(e),n&&(e=this._groupItems(e,t)),this._removeConsecutiveSeparators(e),e},t.prototype._clearTimeout=function(e){if(this.timers){var t=this.timers.indexOf(e);this.timers.splice(t,1)}window.clearTimeout(e)},t.prototype._findMenuItems=function(e){var t=document.querySelector("#"+e);if(t)return t.querySelectorAll("[role='menuitem']")},t.prototype._findItemIndex=function(e,t){var i=-1;if(e&&e.length>1)for(var n=0;n<e.length;n++){var o=e.item(n);if(o.parentElement&&o.parentElement.id===t){i=n;break}}return i},t.prototype._focusItem=function(e,t){var i=!1;if(e&&e.length>t&&t>-1){e.item(t).focus(),i=!0}return i},t.prototype._itemsChanged=function(e,t,i){var n=this;if(this._isMounted){var o={};this._items.forEach(function(e){t&&-1!==t.indexOf(e.key)||(o[e.key]=e)}),e.forEach(function(e){e.invalidateItem=function(){n._invalidateItem(e.key)},o[e.key]=e});var s=[];Object.keys(o).forEach(function(e){s.push(o[e])}),this._items=s,this.setState({displayItems:this._arrangeItems(s,i)})}},t.prototype._groupItems=function(e,t){var i={},n=0,o=[],s=this._forceGroupNames;if(this._groups){n=this._groups.reduce(function(e,t){return t.rank>e?t.rank:e},0);for(var r=0,u=this._groups;r<u.length;r++){v=u[r];i[v.key]={key:v.key,name:v.name,rank:void 0===v.rank?++n:v.rank,showGroupName:v.showGroupName,items:[]}}}else this._groups=[];if(t)for(var a=0,m=t;a<m.length;a++){v=m[a];i[v.key]||(i[v.key]={key:v.key,name:v.name,rank:void 0===v.rank?++n:v.rank,showGroupName:v.showGroupName,items:[]},this._groups.push(v))}for(var p=0,c=e;p<c.length;p++){var l=c[p];l.groupKey?i[l.groupKey]?i[l.groupKey].items.push(l):i[l.groupKey]={key:l.groupKey,name:l.groupKey,rank:++n,items:[l]}:o.push(l)}var h=Object.keys(i).map(function(e){return i[e]});h.sort(function(e,t){return(e.rank||Number.MAX_VALUE)-(t.rank||Number.MAX_VALUE)}),h.push({key:"ungrouped",name:"Ungrouped",rank:++n,items:o}),h.forEach(function(e){for(var t=e.items;t.length>0&&t[0].itemType===ContextualMenuItemType.Divider;)t.shift();for(;t.length>0&&t[t.length-1].itemType===ContextualMenuItemType.Divider;)t.pop()}),e=[];for(var f=!0,d=0,_=h;d<_.length;d++){var v;(0!==(v=_[d]).items.length||s)&&(v.showGroupName&&v.name||s?e.push({key:"group_"+v.name,itemType:ContextualMenuItemType.Header,name:s?v.name+" (key: "+v.key+")":v.name}):f||e.push({key:"divider_"+v.name,itemType:ContextualMenuItemType.Divider}),f&&(f=!1),e=e.concat(v.items))}return e},t.prototype._onDismiss=function(e,t){this._activeElement&&this.contains(document.activeElement)&&this._activeElement.focus(),this.props.onDismiss(e,t)},t.prototype._onRenderSubMenu=function(e){var i=this;return this.subMenuId=e.id,e.items&&e.items.forEach(function(e){e.invalidateItem=function(){i._invalidateItem(e.key)}}),React.createElement(t,tslib_1.__assign({ref:function(e){i._submenuComponent=e}},e))},t.prototype._removeConsecutiveSeparators=function(e){for(var t=!1,i=e.length-1;i>=0;i--){var n=e[i].itemType===ContextualMenuItemType.Divider;n&&t&&e.splice(i,1),t=n}},t.prototype._setTimeout=function(e,t){for(var i=[],n=2;n<arguments.length;n++)i[n-2]=arguments[n];var o=window.setTimeout.apply(window,[e,t].concat(i));return this.timers||(this.timers=[]),this.timers.push(o),o},t.prototype._sortItems=function(e){e.sort(function(e,t){return(e.rank||Number.MAX_VALUE)-(t.rank||Number.MAX_VALUE)})},tslib_1.__decorate([autobind],t.prototype,"_itemsChanged",null),tslib_1.__decorate([autobind],t.prototype,"_onDismiss",null),tslib_1.__decorate([autobind],t.prototype,"_onRenderSubMenu",null),t}(BaseComponent);export{VssContextualMenu};
+import*as tslib_1 from"tslib";import*as React from"react";import*as ReactDOM from"react-dom";import{ContextualMenu,ContextualMenuItemType}from"office-ui-fabric-react/lib/ContextualMenu";import{css,autobind,BaseComponent,elementContains}from"office-ui-fabric-react/lib/Utilities";import"./VssContextualMenu.css";var VssContextualMenu=function(e){function t(){var t=e.call(this)||this;return t._invalidateItem=function(e){var i=!1;if(t.subMenuId){var n=t._findMenuItems(t.subMenuId),o=t._findItemIndex(n,e);i=t._focusItem(n,o-1)}if(!i){var n=t._findMenuItems(t.props.id),o=t._findItemIndex(n,e);(i=t._focusItem(n,o-1))||(o>0?i=t._focusItem(n,0):t._setTimeout(function(){var e=t._findMenuItems(t.props.id);t._focusItem(e,0)},0))}!i&&t._activeElement&&t.contains(document.activeElement)&&t._activeElement.focus()},t.timers=[],t._items=[],t._groups=[],t.state={displayItems:[]},t}return tslib_1.__extends(t,e),t.prototype.render=function(){if(this.state.loadingTimeout)return null;var e=this.state.displayItems,t=this.props,i=t.className,n=t.directionalHint,o=t.gapSpace,s=void 0===o?5:o,r=!(!this._items||!this._items.some(function(e){return!!e.icon||!!e.iconProps}));return this._items.forEach(function(e){e.menuHasIcons=r}),React.createElement(ContextualMenu,tslib_1.__assign({gapSpace:s,directionalHint:n},this.props,{items:e,className:css("vss-contextualMenu-list",i),onDismiss:this._onDismiss,onRenderSubMenu:this._onRenderSubMenu}))},t.prototype.componentWillMount=function(){var e=this,i=this._setTimeout(function(){e.setState({loadingTimeout:void 0})},100);this._items=this.props.items||[],this._groups=this.props.groups||[],this.setState({displayItems:this.props.items?this._arrangeItems(this.props.items):[],loadingTimeout:i}),this.props.isSubMenu||(t._activeMenu&&t._activeMenu.dismiss(null,!0),t._activeMenu=this),this._activeElement=document.activeElement},t.prototype.componentWillUnmount=function(){if(this._isMounted=!1,e.prototype.componentWillUnmount.call(this),this.state.loadingTimeout&&this._clearTimeout(this.state.loadingTimeout),this.timers){for(var i=0,n=this.timers;i<n.length;i++){var o=n[i];window.clearTimeout(o)}this.timers=[]}t._activeMenu===this&&delete t._activeMenu},t.prototype.componentDidMount=function(){var e=this;if(this._isMounted=!0,this.props.providers&&this.props.providers.length>0)for(var t=this.props.providers.map(function(e,t){return t}),i=function(i){n.props.providers[i].loadItems(function(t,i,n){e._itemsChanged(t,i,n)},function(){if(e.state.loadingTimeout){var n=t.indexOf(i);n>-1&&(t.splice(n,1),e._isMounted&&0===t.length&&e.setState({loadingTimeout:void 0}))}})},n=this,o=0;o<this.props.providers.length;o++)i(o);else this.setState({loadingTimeout:void 0});this.props.mouseLeaveDelayMs&&this._events.on(document.body,"mousemove",function(t){e.props.target.contains(t.target)||e.contains(t.target)?e.closeTimeout&&(e._clearTimeout(e.closeTimeout),delete e.closeTimeout):e.closeTimeout||(e.closeTimeout=e._setTimeout(function(){delete e.closeTimeout,e.dismiss(t,!0)},e.props.mouseLeaveDelayMs||0))}),this._events.on(document,"keydown",function(t){"`"!==t.key||t.defaultPrevented?16===t.which||17===t.which||18===t.which||e.props.isSubMenu||e.props.shouldFocusOnMount||e.contains(document.activeElement)||e.dismiss(t,!0):(e._forceGroupNames=!e._forceGroupNames,e.setState({displayItems:e._arrangeItems(e._items)}))})},t.prototype.componentWillReceiveProps=function(e){if(e.isSubMenu){var t=this.props.items.length!==e.items.length;t||(t=this.props.items.some(function(t){return!e.items.some(function(e){return e.key===t.key})})),t&&this.setState({displayItems:e.items?this._arrangeItems(e.items):[]})}},t.prototype.contains=function(e){return this._isMounted&&elementContains(ReactDOM.findDOMNode(this),e)||this._submenuComponent&&this._submenuComponent.contains(e)},t.prototype.dismiss=function(e,t){this.props.onDismiss&&this.props.onDismiss(e,!0)},t.prototype._arrangeItems=function(e,t){var i=e.some(function(e){return e.rank>=0}),n=e.some(function(e){return!!e.groupKey});return e=e.slice(),i&&this._sortItems(e),n&&(e=this._groupItems(e,t)),this._removeConsecutiveSeparators(e),e},t.prototype._clearTimeout=function(e){if(this.timers){var t=this.timers.indexOf(e);this.timers.splice(t,1)}window.clearTimeout(e)},t.prototype._findMenuItems=function(e){var t=document.querySelector("#"+e);if(t)return t.querySelectorAll("[role='menuitem']")},t.prototype._findItemIndex=function(e,t){var i=-1;if(e&&e.length>1)for(var n=0;n<e.length;n++){var o=e.item(n);if(o.parentElement&&o.parentElement.id===t){i=n;break}}return i},t.prototype._focusItem=function(e,t){var i=!1;if(e&&e.length>t&&t>-1){e.item(t).focus(),i=!0}return i},t.prototype._itemsChanged=function(e,t,i){var n=this;if(this._isMounted){var o={};this._items.forEach(function(e){t&&-1!==t.indexOf(e.key)||(o[e.key]=e)}),e.forEach(function(e){e.invalidateItem=function(){n._invalidateItem(e.key)},o[e.key]=e});var s=[];Object.keys(o).forEach(function(e){s.push(o[e])}),this._items=s,this.setState({displayItems:this._arrangeItems(s,i)})}},t.prototype._groupItems=function(e,t){var i={},n=0,o=[],s=this._forceGroupNames;if(this._groups){n=this._groups.reduce(function(e,t){return t.rank>e?t.rank:e},0);for(var r=0,u=this._groups;r<u.length;r++){v=u[r];i[v.key]={key:v.key,name:v.name,rank:void 0===v.rank?++n:v.rank,showGroupName:v.showGroupName,items:[]}}}else this._groups=[];if(t)for(var a=0,m=t;a<m.length;a++){v=m[a];i[v.key]||(i[v.key]={key:v.key,name:v.name,rank:void 0===v.rank?++n:v.rank,showGroupName:v.showGroupName,items:[]},this._groups.push(v))}for(var p=0,c=e;p<c.length;p++){var l=c[p];l.groupKey?i[l.groupKey]?i[l.groupKey].items.push(l):i[l.groupKey]={key:l.groupKey,name:l.groupKey,rank:++n,items:[l]}:o.push(l)}var h=Object.keys(i).map(function(e){return i[e]});h.sort(function(e,t){return(e.rank||Number.MAX_VALUE)-(t.rank||Number.MAX_VALUE)}),h.push({key:"ungrouped",name:"Ungrouped",rank:++n,items:o}),h.forEach(function(e){for(var t=e.items;t.length>0&&t[0].itemType===ContextualMenuItemType.Divider;)t.shift();for(;t.length>0&&t[t.length-1].itemType===ContextualMenuItemType.Divider;)t.pop()}),e=[];for(var f=!0,d=0,_=h;d<_.length;d++){var v;(0!==(v=_[d]).items.length||s)&&(v.showGroupName&&v.name||s?e.push({key:"group_"+v.name,itemType:ContextualMenuItemType.Header,name:s?v.name+" (key: "+v.key+")":v.name}):f||e.push({key:"divider_"+v.name,itemType:ContextualMenuItemType.Divider}),f&&(f=!1),e=e.concat(v.items))}return e},t.prototype._onDismiss=function(e,t){this._activeElement&&this.contains(document.activeElement)&&this._activeElement.focus(),this.props.onDismiss(e,t)},t.prototype._onRenderSubMenu=function(e){var i=this;return this.subMenuId=e.id,e.items&&e.items.forEach(function(e){e.invalidateItem=function(){i._invalidateItem(e.key)}}),React.createElement(t,tslib_1.__assign({ref:function(e){i._submenuComponent=e}},e))},t.prototype._removeConsecutiveSeparators=function(e){for(var t=!1,i=e.length-1;i>=0;i--){var n=e[i].itemType===ContextualMenuItemType.Divider;n&&t&&e.splice(i,1),t=n}},t.prototype._setTimeout=function(e,t){for(var i=[],n=2;n<arguments.length;n++)i[n-2]=arguments[n];var o=window.setTimeout.apply(window,[e,t].concat(i));return this.timers||(this.timers=[]),this.timers.push(o),o},t.prototype._sortItems=function(e){e.sort(function(e,t){return(e.rank||Number.MAX_VALUE)-(t.rank||Number.MAX_VALUE)})},tslib_1.__decorate([autobind],t.prototype,"_itemsChanged",null),tslib_1.__decorate([autobind],t.prototype,"_onDismiss",null),tslib_1.__decorate([autobind],t.prototype,"_onRenderSubMenu",null),t}(BaseComponent);export{VssContextualMenu};

Components/VssDetailsList/index.d.ts

 export * from './VssDetailsList';
+export * from './VssDetailsList.Props';
 export * from './VssDetailsListGroupHeader';
 export * from './VssDetailsListTitleCell';
-export * from './VssDetailsList.Props';

Components/VssDetailsList/index.js

@@ -1,1 +0,1 @@
-export*from"./VssDetailsList";export*from"./VssDetailsListGroupHeader";export*from"./VssDetailsListTitleCell";export*from"./VssDetailsList.Props";
+export*from"./VssDetailsList";export*from"./VssDetailsList.Props";export*from"./VssDetailsListGroupHeader";export*from"./VssDetailsListTitleCell";

Components/VssDetailsList/VssDetailsList.d.ts

 /// <reference types="react" />
-import { IDetailsListProps } from 'office-ui-fabric-react/lib/DetailsList';
-import { BaseComponent, IPoint } from 'office-ui-fabric-react/lib/Utilities';
+import { IDetailsListProps, IColumn, ISelection } from 'office-ui-fabric-react/lib/DetailsList';
+import { BaseComponent } from 'office-ui-fabric-react/lib/Utilities';
 import { IVssDetailsListProps } from '../../Components/VssDetailsList/VssDetailsList.Props';
@@ -13,6 +13,6 @@ import "./VssDetailsList.css";
     /**
-     * The mouse event target point from the onContextMenu event where the
+     * The mouse event or HTMLElement from the onContextMenu event where the
      * contextual menu should be displayed.
      */
-    targetPoint?: IPoint;
+    target?: MouseEvent | HTMLElement;
     /**
@@ -23,2 +23,10 @@ * Classnames to pass to DetailsList based on presentationStyles provided
     classNames?: string;
+    /**
+     * Columns to pass to DetailsList (this may not be the same as the one from props if context menu is enabled).
+     */
+    columns?: IColumn[];
+    /**
+     * Selection object for the DetailsList.
+     */
+    selection?: ISelection;
 }
@@ -36,4 +44,9 @@ /**
     private _onDismiss();
+    private _onEllipsisClick(e);
     private _createActionsColumn(column);
+    private _hasActions(props);
+    private _buildSelection(props);
+    private _buildColumns(props);
     private _buildClassNames(props);
+    private _getContextMenu();
 }

Components/VssDetailsList/VssDetailsList.js

@@ -1,1 +0,1 @@
-import*as tslib_1 from"tslib";import*as React from"react";import{CheckboxVisibility,DetailsList}from"office-ui-fabric-react/lib/DetailsList";import{autobind,BaseComponent,css}from"office-ui-fabric-react/lib/Utilities";import{MoreActionsButton}from"../../ContextualMenuButton";import{VssDetailsListRowStyle}from"../../Components/VssDetailsList/VssDetailsList.Props";import"./VssDetailsList.css";var VssDetailsList=function(t){function e(e){var s=t.call(this,e)||this;return s.standardPresentationStyle=127,s.state={},s}return tslib_1.__extends(e,t),e.prototype.componentWillMount=function(){var t=this._buildClassNames(this.props);this.setState({classNames:t})},e.prototype.componentWillReceiveProps=function(t){if(this.props.className!==t.className||this.props.presentationStyles!==t.presentationStyles||this.props.usePresentationStyles!==t.usePresentationStyles||this.props.rowStyle!==t.rowStyle){var e=this._buildClassNames(t);this.setState({classNames:e})}},e.prototype.render=function(){var t=this.props,e=t.actionsColumnKey,s=t.columns,i=t.getMenuItems,o=t.checkboxVisibility,n=void 0===o?CheckboxVisibility.hidden:o,a=(t.hideGroupExpansion,this.state.classNames),r=tslib_1.__assign({},this.props);if(r.className=a,r.checkboxVisibility=n,r.checkboxCellClassName="vss-DetailsList--cellCheck",e&&i&&(r.columns=[],r.onItemContextMenu=this._onItemContextMenu,s))for(var l=0;l<s.length;l++){var p=s[l];p.key===e&&(p=this._createActionsColumn(p)),r.columns.push(p)}return React.createElement(DetailsList,tslib_1.__assign({},r))},e.prototype._onItemContextMenu=function(t,e,s){var i=s;if(i){var o=i.target;if(o&&"A"===o.nodeName)return!0}this.props.getMenuItems&&this.props.getMenuItems(t);var n=void 0;i&&0!==i.button&&i.clientX>0&&i.clientY>0&&(n={x:i.clientX,y:i.clientY}),this.setState({activatedItem:t,targetPoint:n})},e.prototype._onDismiss=function(){this.setState({activatedItem:void 0,targetPoint:void 0})},e.prototype._createActionsColumn=function(t){var e=this,s=tslib_1.__assign({},t);return s.onRender=function(s,i,o){var n=null;t.onRender?n=t.onRender(s,i,o):e.props.onRenderItemColumn&&(n=e.props.onRenderItemColumn(s,i,o));var a=!0;return e.props.shouldDisplayActions&&(a=e.props.shouldDisplayActions(s)),a?React.createElement("div",{className:"actions-column-wrapper"},React.createElement("div",{className:"original-content"},n),React.createElement(MoreActionsButton,{allocateSpaceWhileHidden:e.props.allocateSpaceForActionsButtonWhileHidden,className:"vss-DetailsList--contextual-menu-button",getItems:function(){return e.props.getMenuItems(s)},getItemProviders:e.props.getMenuItemProviders&&function(){return e.props.getMenuItemProviders(s)},isOpen:s===e.state.activatedItem,onDismiss:e._onDismiss,targetPoint:e.state.targetPoint,useTargetPoint:void 0!==e.state.targetPoint})):n},s},e.prototype._buildClassNames=function(t){var e=t.usePresentationStyles,s=t.className,i=t.rowStyle,o=t.hideGroupExpansion,n=t.presentationStyles,a="";if(e||n){void 0===n&&(n=this.standardPresentationStyle);var r=["vss-DetailsList--layout"];s&&r.push(s),1&n&&r.push("hideActionsButton"),2&n&&r.push("singleLine"),4&n&&r.push("flexCellLayout"),8&n&&r.push("paddingInCells"),16&n&&r.push("colors"),32&n&&r.push("linkStyles"),64&n&&r.push("headerRowStyles"),a=r.join(" ")}else a=css("vss-DetailsList",s,{"vss-DetailsList--twoLine":i===VssDetailsListRowStyle.twoLine});return a=css(a,{noGroupExpand:o})},tslib_1.__decorate([autobind],e.prototype,"_onItemContextMenu",null),tslib_1.__decorate([autobind],e.prototype,"_onDismiss",null),e}(BaseComponent);export{VssDetailsList};
+import*as tslib_1 from"tslib";import*as React from"react";import{CheckboxVisibility,DetailsList,Selection,SelectionMode}from"office-ui-fabric-react/lib/DetailsList";import{autobind,BaseComponent,css}from"office-ui-fabric-react/lib/Utilities";import{MoreActionsButton}from"../../ContextualMenuButton";import{ContextualMenuButton}from"../../Components/ContextualMenuButton/ContextualMenuButton";import{VssContextualMenu}from"../../VssContextualMenu";import{closest}from"../../Utilities/Internal";import"./VssDetailsList.css";var VssDetailsList=function(t){function e(e){var s=t.call(this,e)||this;return s.standardPresentationStyle=127,s.state={},s}return tslib_1.__extends(e,t),e.prototype.componentWillMount=function(){var t=this._buildClassNames(this.props),e=this._buildColumns(this.props),s=this._buildSelection(this.props);this.setState({classNames:t,columns:e,selection:s})},e.prototype.componentWillReceiveProps=function(t){var e={};this.props.className===t.className&&this.props.presentationStyles===t.presentationStyles&&this.props.usePresentationStyles===t.usePresentationStyles&&this.props.rowStyle===t.rowStyle||(e.classNames=this._buildClassNames(t)),this.props.columns===t.columns&&this.props.actionsColumnKey===t.actionsColumnKey||(e.columns=this._buildColumns(t)),this.props.selection!==t.selection&&(e.selection=this._buildSelection(t)),this.setState(e)},e.prototype.render=function(){var t=this.props,e=(t.getMenuItems,t.getMenuItemProviders,t.checkboxVisibility),s=void 0===e?CheckboxVisibility.hidden:e,o=this.state,i=o.classNames,n=o.columns,l=tslib_1.__assign({},this.props),r=this._hasActions(this.props);l.className=i,l.checkboxVisibility=s,l.checkboxCellClassName="vss-DetailsList--cellCheck",l.columns=n,r&&(l.onItemContextMenu=this._onItemContextMenu);var a=React.createElement(DetailsList,tslib_1.__assign({},l,{selection:this.state.selection}));return r?React.createElement("div",{className:"vss-DetailsList--contextmenu-wrapper"},a,this._getContextMenu()):a},e.prototype._onItemContextMenu=function(t,e,s){var o=s;if(o){var i=o.target;if(i&&"A"===i.nodeName)return!0}if(!o)return this.setState({activatedItem:t,target:void 0});var n=null;if(0===o.button||!(o.clientX>0&&o.clientY>0)){var l=o.target,r=closest(l,'[role="row"]');n=r?r.querySelector("."+ContextualMenuButton.ButtonContainerClassName):null}this.setState({activatedItem:t,target:n||o})},e.prototype._onDismiss=function(){this.setState({activatedItem:void 0,target:void 0})},e.prototype._onEllipsisClick=function(t){var e=Number(t.currentTarget.dataset.index),s=this.props.selectionMode===SelectionMode.multiple,o=this.state.selection;o.setChangeEvents(!1);var i=t.ctrlKey||t.metaKey;if(s&&t.shiftKey){var n=!i;o.selectToIndex(e,n)}else if(s){!o.isIndexSelected(e)&&!i&&o.setAllSelected(!1),o.setIndexSelected(e,!0,!0)}else o.setAllSelected(!1),o.setIndexSelected(e,!0,!0);o.setChangeEvents(!0)},e.prototype._createActionsColumn=function(t){var e=this,s=tslib_1.__assign({},t);return s.onRender=function(s,o,i){var n=null;t.onRender?n=t.onRender(s,o,i):e.props.onRenderItemColumn&&(n=e.props.onRenderItemColumn(s,o,i));var l=!0;return e.props.shouldDisplayActions&&(l=e.props.shouldDisplayActions(s)),l?React.createElement("div",{className:"actions-column-wrapper"},React.createElement("div",{className:"original-content"},n),React.createElement(MoreActionsButton,{allocateSpaceWhileHidden:e.props.allocateSpaceForActionsButtonWhileHidden,className:"vss-DetailsList--contextual-menu-button",getItems:function(){return e.props.getMenuItems(s)},getItemProviders:e.props.getMenuItemProviders&&function(){return e.props.getMenuItemProviders(s)},onDismiss:e._onDismiss,"data-index":o,onClick:e._onEllipsisClick})):n},s},e.prototype._hasActions=function(t){return!(!t.actionsColumnKey||!t.getMenuItems)},e.prototype._buildSelection=function(t){return t.selection||new Selection({getKey:t.getKey})},e.prototype._buildColumns=function(t){var e=t.actionsColumnKey,s=t.columns;if(this._hasActions(t)&&s){for(var o=[],i=0,n=s;i<n.length;i++){var l=n[i];l.key===e&&(l=this._createActionsColumn(l)),o.push(l)}return o}return s},e.prototype._buildClassNames=function(t){var e=t.usePresentationStyles,s=t.className,o=t.rowStyle,i=t.hideGroupExpansion,n=t.presentationStyles,l="";if(e||n){void 0===n&&(n=this.standardPresentationStyle);var r=["vss-DetailsList--layout"];s&&r.push(s),1&n&&r.push("hideActionsButton"),2&n&&r.push("singleLine"),4&n&&r.push("flexCellLayout"),8&n&&r.push("paddingInCells"),16&n&&r.push("colors"),32&n&&r.push("linkStyles"),64&n&&r.push("headerRowStyles"),l=r.join(" ")}else l=css("vss-DetailsList",s,{"vss-DetailsList--twoLine":1===o});return l=css(l,{noGroupExpand:i})},e.prototype._getContextMenu=function(){var t=this.state,e=t.activatedItem,s=t.target;if(e){var o=this.props,i=o.getMenuItems,n=o.getMenuItemProviders,l=i(e),r=n?n(e):void 0;if(l||r)return React.createElement(VssContextualMenu,{items:l,providers:r,onDismiss:this._onDismiss,shouldFocusOnMount:!0,target:s,gapSpace:0})}},tslib_1.__decorate([autobind],e.prototype,"_onItemContextMenu",null),tslib_1.__decorate([autobind],e.prototype,"_onDismiss",null),tslib_1.__decorate([autobind],e.prototype,"_onEllipsisClick",null),e}(BaseComponent);export{VssDetailsList};

Components/VssDetailsList/VssDetailsListTitleCell.js

@@ -1,1 +0,1 @@
-import*as tslib_1 from"tslib";import*as React from"react";import{Link}from"office-ui-fabric-react/lib/Link";import{TooltipHost,TooltipOverflowMode}from"office-ui-fabric-react/lib/Tooltip";import{BaseComponent,css}from"office-ui-fabric-react/lib/Utilities";import{ItemIndicatorSet}from"../../ItemIndicator";import{VssIcon,VssIconType}from"../../VssIcon";var VssDetailsListTitleCell=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return tslib_1.__extends(t,e),t.prototype.render=function(){var e=this.props,t=e.secondaryText,s=e.onRenderSecondaryText,i=e.ariaLabel;return t||s?React.createElement("div",{className:"vss-DetailsList--titleCellTwoLine","aria-label":i},this._renderIcon(),React.createElement("div",{className:"vss-DetailsList--titleCellTwoLineText"},this._renderPrimaryText(),this._renderSecondaryText()),this._renderIndicators()):React.createElement("div",{className:"vss-DetailsList--titleCellOneLine","aria-label":i},this._renderIcon(),this._renderPrimaryText(),this._renderIndicators())},t.prototype._renderPrimaryText=function(){var e=this.props,t=e.primaryText,s=e.primaryAction,i=e.primaryTarget,r=e.disabled,a=e.onRenderPrimaryText,l=this.props.primaryActionRole,n=a?a():s?"function"==typeof s?React.createElement(Link,{className:css("vss-DetailsList--titleCellText",{disabled:r}),role:l||"button",href:"#",onClick:s},t):React.createElement(Link,{className:css("vss-DetailsList--titleCellText",{disabled:r}),role:l||"link",href:s,target:i},t):React.createElement("span",{className:css("vss-DetailsList--titleCellText",{disabled:r})},t);return React.createElement("div",{className:"vss-DetailsList--titleCellPrimary"},n)},t.prototype._renderSecondaryText=function(){var e=this.props,t=e.secondaryText,s=e.disabled,i=e.onRenderSecondaryText,r=i?i():React.createElement(TooltipHost,{content:t,overflowMode:TooltipOverflowMode.Parent},React.createElement("span",{className:css("vss-DetailsList--titleCellText",{disabled:s})},t));return r?React.createElement("div",{className:"vss-DetailsList--titleCellSecondary"},r):null},t.prototype._renderIcon=function(){var e=this.props,t=e.iconProps,s=e.disabled;return t?React.createElement(VssIcon,tslib_1.__assign({className:css("vss-DetailsList--titleCellIcon",{disabled:s,"vss-DetailsList--titleCellIcon--image":t.iconType===VssIconType.image})},t)):null},t.prototype._renderIndicators=function(){var e=this.props.indicators?this.props.indicators.map(function(e){return e.getItemIndicator()}):[];return e&&e.length>0?React.createElement(ItemIndicatorSet,{indicators:e}):null},t}(BaseComponent);export{VssDetailsListTitleCell};
+import*as tslib_1 from"tslib";import*as React from"react";import{Link}from"office-ui-fabric-react/lib/Link";import{TooltipHost,TooltipOverflowMode}from"office-ui-fabric-react/lib/Tooltip";import{BaseComponent,css}from"office-ui-fabric-react/lib/Utilities";import{ItemIndicatorSet}from"../../ItemIndicator";import{VssIcon}from"../../VssIcon";var VssDetailsListTitleCell=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return tslib_1.__extends(t,e),t.prototype.render=function(){var e=this.props,t=e.secondaryText,i=e.onRenderSecondaryText,s=e.ariaLabel;return t||i?React.createElement("div",{className:"vss-DetailsList--titleCellTwoLine","aria-label":s},this._renderIcon(),React.createElement("div",{className:"vss-DetailsList--titleCellTwoLineText"},this._renderPrimaryText(),this._renderSecondaryText()),this._renderIndicators()):React.createElement("div",{className:"vss-DetailsList--titleCellOneLine","aria-label":s},this._renderIcon(),this._renderPrimaryText(),this._renderIndicators())},t.prototype._renderPrimaryText=function(){var e=this.props,t=e.primaryText,i=e.primaryAction,s=e.primaryTarget,r=e.disabled,a=e.onRenderPrimaryText,l=this.props.primaryActionRole,n=a?a():i?"function"==typeof i?React.createElement(Link,{className:css("vss-DetailsList--titleCellText",{disabled:r}),role:l||"button",href:"#",onClick:i},t):React.createElement(Link,{className:css("vss-DetailsList--titleCellText",{disabled:r}),role:l||"link",href:i,target:s},t):React.createElement("span",{className:css("vss-DetailsList--titleCellText",{disabled:r})},t);return React.createElement("div",{className:"vss-DetailsList--titleCellPrimary"},n)},t.prototype._renderSecondaryText=function(){var e=this.props,t=e.secondaryText,i=e.disabled,s=e.onRenderSecondaryText,r=s?s():React.createElement(TooltipHost,{content:t,overflowMode:TooltipOverflowMode.Parent},React.createElement("span",{className:css("vss-DetailsList--titleCellText",{disabled:i})},t));return r?React.createElement("div",{className:"vss-DetailsList--titleCellSecondary"},r):null},t.prototype._renderIcon=function(){var e=this.props,t=e.iconProps,i=e.disabled;return t?React.createElement(VssIcon,tslib_1.__assign({className:css("vss-DetailsList--titleCellIcon",{disabled:i,"vss-DetailsList--titleCellIcon--image":3===t.iconType})},t)):null},t.prototype._renderIndicators=function(){var e=this.props.indicators?this.props.indicators.map(function(e){return e.getItemIndicator()}):[];return e&&e.length>0?React.createElement(ItemIndicatorSet,{indicators:e}):null},t}(BaseComponent);export{VssDetailsListTitleCell};

Components/VssIcon/VssIcon.js

@@ -1,1 +0,1 @@
-import*as tslib_1 from"tslib";import*as React from"react";import{Icon,IconType}from"office-ui-fabric-react/lib/Icon";import{BaseComponent,css}from"office-ui-fabric-react/lib/Utilities";import{VssIconType}from"../../Components/VssIcon/VssIcon.Props";import"./VssIcon.css";var VssIcon=function(e){function o(o){var s=e.call(this,o)||this;return s.state={},s}return tslib_1.__extends(o,e),o.prototype.render=function(){return React.createElement(Icon,tslib_1.__assign({},o.getIconProps(this.props)),this.props.children)},o.getIconProps=function(e){var s=tslib_1.__assign({},e);delete s.iconType,delete s.iconName;var i=e.iconType;!i&&e.iconName&&e.iconName.substr(0,o.bowtieIconPrefix.length)===o.bowtieIconPrefix&&(i=VssIconType.bowtie),s.iconType=e.iconType===VssIconType.image?IconType.image:IconType.default;var n=css("vss-Icon");if(s.className?s.className=s.className+" "+n:s.className=n,i===VssIconType.bowtie){var t=e.iconName;"string"==typeof t&&t.substr(0,o.bowtieIconPrefix.length)!==o.bowtieIconPrefix&&(t=o.bowtieIconPrefix+t);var c=css("vss-Icon--bowtie",t);s.className=s.className+" "+c}else s.iconName=e.iconName;return s},o.bowtieIconPrefix="bowtie-",o}(BaseComponent);export{VssIcon};
+import*as tslib_1 from"tslib";import*as React from"react";import{Icon,IconType}from"office-ui-fabric-react/lib/Icon";import{BaseComponent,css}from"office-ui-fabric-react/lib/Utilities";import"./VssIcon.css";var VssIcon=function(e){function o(o){var s=e.call(this,o)||this;return s.state={},s}return tslib_1.__extends(o,e),o.prototype.render=function(){return React.createElement(Icon,tslib_1.__assign({},o.getIconProps(this.props)),this.props.children)},o.getIconProps=function(e){var s=tslib_1.__assign({},e);delete s.iconType,delete s.iconName;var i=e.iconType;!i&&e.iconName&&e.iconName.substr(0,o.bowtieIconPrefix.length)===o.bowtieIconPrefix&&(i=1),s.iconType=3===e.iconType?IconType.image:IconType.default;var t=css("vss-Icon");if(s.className?s.className=s.className+" "+t:s.className=t,1===i){var c=e.iconName;"string"==typeof c&&c.substr(0,o.bowtieIconPrefix.length)!==o.bowtieIconPrefix&&(c=o.bowtieIconPrefix+c);var n=css("vss-Icon--bowtie",c);s.className=s.className+" "+n}else s.iconName=e.iconName;return s},o.bowtieIconPrefix="bowtie-",o}(BaseComponent);export{VssIcon};

Components/VssPersona/index.d.ts

 export * from "./VssPersona";
 export * from "./VssPersona.Props";
+export { IIdentityDetailsProvider, IVssPersonaProps, VssPersonaSize } from "./VssPersona.Props";

Components/ZeroData/ZeroData.js

@@ -1,1 +0,1 @@
-import*as tslib_1 from"tslib";import*as React from"react";import{DefaultButton,PrimaryButton}from"office-ui-fabric-react/lib/Button";import{BaseComponent}from"office-ui-fabric-react/lib/Utilities";import{ZeroDataActionType}from"../../Components/ZeroData/ZeroData.Props";import"./ZeroData.css";var ZeroData=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return tslib_1.__extends(e,t),e.prototype.render=function(){return React.createElement(ZeroDataMultiple,{items:[this.props]})},e}(BaseComponent);export{ZeroData};var ZeroDataMultiple=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return tslib_1.__extends(e,t),e.prototype.render=function(){var t=this.props.items.length>1;return React.createElement("div",{className:"vss-ZeroData "+(t?"multiple":"single")},this.props.items.map(function(e,a){return React.createElement(ZeroDataItem,{item:e,key:a,multiple:t})}))},e}(BaseComponent),ZeroDataItem=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return tslib_1.__extends(e,t),e.prototype.render=function(){var t,e=this.props.item;return t="string"==typeof e.secondaryText?React.createElement("span",null,e.secondaryText):e.secondaryText,React.createElement("div",{className:"vss-ZeroDataItem"},React.createElement("img",{className:"vss-ZeroDataItem--image",src:e.imagePath,alt:e.imageAltText}),React.createElement("div",{className:"vss-ZeroDataItem--primary "+(this.props.multiple?"ms-font-xl":"ms-font-xxl")},e.primaryText),t&&React.createElement("div",{className:"vss-ZeroDataItem--secondary ms-font-m"},t),this._renderAction(e))},e.prototype._renderAction=function(t){if(!t.actionText)return null;var e={className:"vss-ZeroDataItem--action",text:t.actionText,onClick:function(e){t.onActionClick&&t.onActionClick.call(null,e,t)}};return t.actionType===ZeroDataActionType.ctaButton?React.createElement(PrimaryButton,tslib_1.__assign({},e)):React.createElement(DefaultButton,tslib_1.__assign({},e))},e}(BaseComponent);
+import*as tslib_1 from"tslib";import*as React from"react";import{DefaultButton,PrimaryButton}from"office-ui-fabric-react/lib/Button";import{BaseComponent}from"office-ui-fabric-react/lib/Utilities";import"./ZeroData.css";var ZeroData=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return tslib_1.__extends(e,t),e.prototype.render=function(){return React.createElement(ZeroDataMultiple,{items:[this.props]})},e}(BaseComponent);export{ZeroData};var ZeroDataMultiple=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return tslib_1.__extends(e,t),e.prototype.render=function(){var t=this.props.items.length>1;return React.createElement("div",{className:"vss-ZeroData "+(t?"multiple":"single")},this.props.items.map(function(e,a){return React.createElement(ZeroDataItem,{item:e,key:a,multiple:t})}))},e}(BaseComponent),ZeroDataItem=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return tslib_1.__extends(e,t),e.prototype.render=function(){var t,e=this.props.item;return t="string"==typeof e.secondaryText?React.createElement("span",null,e.secondaryText):e.secondaryText,React.createElement("div",{className:"vss-ZeroDataItem"},React.createElement("img",{className:"vss-ZeroDataItem--image",src:e.imagePath,alt:e.imageAltText}),React.createElement("div",{className:"vss-ZeroDataItem--primary "+(this.props.multiple?"ms-font-xl":"ms-font-xxl")},e.primaryText),t&&React.createElement("div",{className:"vss-ZeroDataItem--secondary ms-font-m"},t),this._renderAction(e))},e.prototype._renderAction=function(t){if(!t.actionText)return null;var e={className:"vss-ZeroDataItem--action",text:t.actionText,onClick:function(e){t.onActionClick&&t.onActionClick.call(null,e,t)}};return 0===t.actionType?React.createElement(PrimaryButton,tslib_1.__assign({},e)):React.createElement(DefaultButton,tslib_1.__assign({},e))},e}(BaseComponent);

package.json

 {
     "name": "vss-ui",
-    "version": "3.125.2",
+    "version": "3.127.0",
     "description": "UI Components for building UI in Visual Studio Team Services",
@@ -34,3 +34,3 @@ "author": "Microsoft Corporation",
     "dependencies": {
-        "office-ui-fabric-react": "~5.9.0",
+        "office-ui-fabric-react": "~5.21.1",
         "tslib": "~1.7.1"
@@ -37,0 +37,0 @@ },

Resources/VSS.Resources.VSSUI.d.ts

@@ -46,1 +46,2 @@ export declare var ClearFilterBarLinkText: string;
 export declare var Loading: string;
+export declare var Searching: string;

Resources/VSS.Resources.VSSUI.js

@@ -1,1 +0,1 @@
-export var ClearFilterBarLinkText="Clear";export var ClearFilterBarLinkAriaLabel="Clear all filters";export var KeywordFilterBarItemPlaceholderText="Filter by keywords";export var MoreActionsText="More Actions...";export var DateTimePicker_CannotParseTime="cannot parse";export var DateTimeRangePicker_End="End";export var DateTimeRangePicker_Start="Start";export var PivotBarViewActionOffText="Off";export var PivotBarViewActionOnText="On";export var ApplyChangesFilterBarText="Apply";export var DateTimePicker_DateFieldAriaLabel="Date";export var DateTimePicker_TimeFieldAriaLabel="Time";export var PickListClearActionText="Clear";export var PickListSelectAllActionText="Select all";export var FilterOperatorAnd="And";export var FilterOperatorOr="Or";export var FilterTextItemClearLabel="Clear the filter input";export var ResetFilterBarLinkText="Reset";export var PivotBarViewOptionsText="View options";export var PivotBarFilterActionTextHide="Hide filters";export var PivotBarFilterActionTextShow="Show filters";export var EnterFullScreenAriaLabel="Enter full screen mode";export var ExitFullScreenAriaLabel="Exit full screen mode";export var FilterDropdownLabel="{0} filter:";export var PivotBarFullScreenText="Full screen mode toggle";export var BreadcrumbAriaLabel="Breadcrumbs";export var PivotBarMoreCommandsAriaLabel="More commands";export var PivotBarMoreOptionsAriaLabel="More options";export var FileInputBrowseButtonLabel="Browse...";export var FileInputDragDropLabel="Drag and drop files here or click browse to select a file";export var FileInputDragDropSingleFileLabel="Drag and drop a file here or click browse to select a file";export var FileInputErrorDuplicateFileName='Duplicate file: "{0}". Cannot upload two files with the same file name.';export var FileInputErrorNotAllowedExtensionType="File extention {0} is not supported. Allowed Extensions : {1}";export var FileInputErrorLabel="Error";export var FileInputErrorMaxFileSize="File {0} is {1} which exceeds the maximum size allowed for upload of a single file ({2}).";export var FileInputErrorMaxNumFiles="Only {0} files are allowed to be uploaded at one time.";export var FileInputErrorSingleFileOnly="Only a single file can be uploaded at a time.";export var FileInputErrorTotalFileSize="The files being added total {0} which exceeds the maximum total size allowed to be uploaded ({1}).";export var FileInputReadErrorFormat="Failed to read file {0}: {1}";export var FileInputRemoveAll="remove all";export var FileInputRemoveFile="remove";export var FileSizeBytesFormat="{0} bytes";export var FileSizeKBFormat="{0} KB";export var FileSizeMBFormat="{0} MB";export var Loading="Loading...";
+export var ClearFilterBarLinkText="Clear";export var ClearFilterBarLinkAriaLabel="Clear all filters";export var KeywordFilterBarItemPlaceholderText="Filter by keywords";export var MoreActionsText="More Actions...";export var DateTimePicker_CannotParseTime="Invalid time value specified.";export var DateTimeRangePicker_End="End";export var DateTimeRangePicker_Start="Start";export var PivotBarViewActionOffText="Off";export var PivotBarViewActionOnText="On";export var ApplyChangesFilterBarText="Apply";export var DateTimePicker_DateFieldAriaLabel="Date";export var DateTimePicker_TimeFieldAriaLabel="Time";export var PickListClearActionText="Clear";export var PickListSelectAllActionText="Select all";export var FilterOperatorAnd="And";export var FilterOperatorOr="Or";export var FilterTextItemClearLabel="Clear the filter input";export var ResetFilterBarLinkText="Reset";export var PivotBarViewOptionsText="View options";export var PivotBarFilterActionTextHide="Hide filters";export var PivotBarFilterActionTextShow="Show filters";export var EnterFullScreenAriaLabel="Enter full screen mode";export var ExitFullScreenAriaLabel="Exit full screen mode";export var FilterDropdownLabel="{0} filter:";export var PivotBarFullScreenText="Full screen mode toggle";export var BreadcrumbAriaLabel="Breadcrumbs";export var PivotBarMoreCommandsAriaLabel="More commands";export var PivotBarMoreOptionsAriaLabel="More options";export var FileInputBrowseButtonLabel="Browse...";export var FileInputDragDropLabel="Drag and drop files here or click browse to select a file";export var FileInputDragDropSingleFileLabel="Drag and drop a file here or click browse to select a file";export var FileInputErrorDuplicateFileName='Duplicate file: "{0}". Cannot upload two files with the same file name.';export var FileInputErrorNotAllowedExtensionType="File extention {0} is not supported. Allowed Extensions : {1}";export var FileInputErrorLabel="Error";export var FileInputErrorMaxFileSize="File {0} is {1} which exceeds the maximum size allowed for upload of a single file ({2}).";export var FileInputErrorMaxNumFiles="Only {0} files are allowed to be uploaded at one time.";export var FileInputErrorSingleFileOnly="Only a single file can be uploaded at a time.";export var FileInputErrorTotalFileSize="The files being added total {0} which exceeds the maximum total size allowed to be uploaded ({1}).";export var FileInputReadErrorFormat="Failed to read file {0}: {1}";export var FileInputRemoveAll="remove all";export var FileInputRemoveFile="remove";export var FileSizeBytesFormat="{0} bytes";export var FileSizeKBFormat="{0} KB";export var FileSizeMBFormat="{0} MB";export var Loading="Loading...";export var Searching="Searching...";

Utilities/Filter.d.ts

@@ -5,3 +5,3 @@ import { IObservable, Observable } from './Observable';
 export declare const FILTER_RESET_EVENT = "reset-filters";
-export declare enum FilterOperatorType {
+export declare const enum FilterOperatorType {
     /**
@@ -12,3 +12,3 @@ * The filter's value should be treated as having the AND operator
      */
-    and = 0,
+    and = "and",
     /**
@@ -19,3 +19,3 @@ * The filter's value should be treated as having the OR operator
      */
-    or = 1,
+    or = "or",
 }
@@ -22,0 +22,0 @@ /**

Utilities/Filter.js

@@ -1,1 +0,1 @@
-import*as tslib_1 from"tslib";import{assign,EventGroup}from"office-ui-fabric-react/lib/Utilities";import{Observable}from"./Observable";export var FILTER_CHANGE_EVENT="filter-changed";export var FILTER_APPLIED_EVENT="filter-applied";export var FILTER_RESET_EVENT="reset-filters";export var FilterOperatorType;!function(t){t[t.and=0]="and",t[t.or=1]="or"}(FilterOperatorType||(FilterOperatorType={}));var Filter=function(){function t(t,e){void 0===t&&(t={}),this.observable=e||new Observable,this.applyMode=!!t.useApplyMode,this.defaultState=assign({},t.defaultState),this.currentState=assign({},this.defaultState),this.applyMode?this.appliedState=assign({},this.currentState):this.appliedState=this.currentState}return t.prototype.subscribe=function(t,e){this.observable.subscribe(t,e)},t.prototype.unsubscribe=function(t,e){this.observable.unsubscribe(t,e)},t.prototype.getState=function(){return tslib_1.__assign({},this.currentState)},t.prototype.getAppliedState=function(){return tslib_1.__assign({},this.appliedState)},t.prototype.getDefaultState=function(){return this.defaultState},t.prototype.setDefaultState=function(t){this.defaultState=t},t.prototype.setState=function(t,e){void 0===e&&(e=!1);var r=this.currentState;if(this.currentState=assign({},t),this.applyMode||(this.appliedState=this.currentState),!e){var i=assign({},t);for(var a in r)t.hasOwnProperty(a)||(i[a]=null);this._triggerStateChange(i)}},t.prototype.getFilterItemState=function(t){return this.currentState[t]},t.prototype.getAppliedFilterItemState=function(t){return this.appliedState[t]},t.prototype.getFilterItemValue=function(t){var e=this.currentState[t];return e?e.value:void 0},t.prototype.setFilterItemState=function(t,e){this.currentState[t]=e;var r={};r[t]=e,this._triggerStateChange(r)},t.prototype.reset=function(){this.setState(this.defaultState),EventGroup.raise(this,FILTER_RESET_EVENT)},t.prototype.applyChanges=function(){this.appliedState=assign({},this.currentState),this._raiseEventAndCallListeners(FILTER_APPLIED_EVENT,this.appliedState)},t.prototype.usesApplyMode=function(){return this.applyMode},t.prototype.hasChangesToApply=function(){return!t.statesAreEqual(this.appliedState,this.currentState)},t.prototype.hasChangesToReset=function(){return!t.statesAreEqual(this.defaultState,this.currentState)},t.prototype._triggerStateChange=function(t){this._raiseEventAndCallListeners(FILTER_CHANGE_EVENT,t),this.applyMode||this._raiseEventAndCallListeners(FILTER_APPLIED_EVENT,t)},t.prototype._raiseEventAndCallListeners=function(t,e){EventGroup.raise(this,t,e),this.observable.notify(e,t)},t.statesAreEqual=function(t,e){return this._checkStateEquality(t,e)&&this._checkStateEquality(e,t)},t._checkStateEquality=function(t,e){for(var r in t){var i=t[r],a=e[r],s=i&&i.value,n=a&&a.value;if(Array.isArray(s)){if(Array.isArray(n)){if(s.length!==n.length)return!1;for(var o=0;o<s.length;o++)if(s[o]!==n[o])return!1}else if(0!==s.length||n)return!1}else if(s){if(s!==n)return!1}else if(Array.isArray(n)){if(0!==n.length)return!1}else if(!!s!=!!n)return!1}return!0},t}();export{Filter};
+import*as tslib_1 from"tslib";import{assign,EventGroup}from"office-ui-fabric-react/lib/Utilities";import{Observable}from"./Observable";export var FILTER_CHANGE_EVENT="filter-changed";export var FILTER_APPLIED_EVENT="filter-applied";export var FILTER_RESET_EVENT="reset-filters";var Filter=function(){function t(t,e){void 0===t&&(t={}),this.observable=e||new Observable,this.applyMode=!!t.useApplyMode,this.defaultState=assign({},t.defaultState),this.currentState=assign({},this.defaultState),this.applyMode?this.appliedState=assign({},this.currentState):this.appliedState=this.currentState}return t.prototype.subscribe=function(t,e){this.observable.subscribe(t,e)},t.prototype.unsubscribe=function(t,e){this.observable.unsubscribe(t,e)},t.prototype.getState=function(){return tslib_1.__assign({},this.currentState)},t.prototype.getAppliedState=function(){return tslib_1.__assign({},this.appliedState)},t.prototype.getDefaultState=function(){return this.defaultState},t.prototype.setDefaultState=function(t){this.defaultState=t},t.prototype.setState=function(t,e){void 0===e&&(e=!1);var r=this.currentState;if(this.currentState=assign({},t),this.applyMode||(this.appliedState=this.currentState),!e){var i=assign({},t);for(var a in r)t.hasOwnProperty(a)||(i[a]=null);this._triggerStateChange(i)}},t.prototype.getFilterItemState=function(t){return this.currentState[t]},t.prototype.getAppliedFilterItemState=function(t){return this.appliedState[t]},t.prototype.getFilterItemValue=function(t){var e=this.currentState[t];return e?e.value:void 0},t.prototype.setFilterItemState=function(t,e){this.currentState[t]=e;var r={};r[t]=e,this._triggerStateChange(r)},t.prototype.reset=function(){this.setState(this.defaultState),EventGroup.raise(this,FILTER_RESET_EVENT)},t.prototype.applyChanges=function(){this.appliedState=assign({},this.currentState),this._raiseEventAndCallListeners(FILTER_APPLIED_EVENT,this.appliedState)},t.prototype.usesApplyMode=function(){return this.applyMode},t.prototype.hasChangesToApply=function(){return!t.statesAreEqual(this.appliedState,this.currentState)},t.prototype.hasChangesToReset=function(){return!t.statesAreEqual(this.defaultState,this.currentState)},t.prototype._triggerStateChange=function(t){this._raiseEventAndCallListeners(FILTER_CHANGE_EVENT,t),this.applyMode||this._raiseEventAndCallListeners(FILTER_APPLIED_EVENT,t)},t.prototype._raiseEventAndCallListeners=function(t,e){EventGroup.raise(this,t,e),this.observable.notify(e,t)},t.statesAreEqual=function(t,e){return this._checkStateEquality(t,e)&&this._checkStateEquality(e,t)},t._checkStateEquality=function(t,e){for(var r in t){var i=t[r],a=e[r],s=i&&i.value,n=a&&a.value;if(Array.isArray(s)){if(Array.isArray(n)){if(s.length!==n.length)return!1;for(var o=0;o<s.length;o++)if(s[o]!==n[o])return!1}else if(0!==s.length||n)return!1}else if(s){if(s!==n)return!1}else if(Array.isArray(n)){if(0!==n.length)return!1}else if(!!s!=!!n)return!1}return!0},t}();export{Filter};

Utilities/Internal.d.ts

@@ -10,1 +10,9 @@ /**
 export declare function arrayEquals<T>(array1: T[], array2: T[], comparer?: (item1: T, item2: T) => boolean): boolean;
+/**
+ * Gets the closest ancestor of the element (or the element itself) using a query selector.
+ *
+ * @param element Starting element.
+ * @param query Query to locate.
+ * @returns {Element}
+ */
+export declare function closest(element: Element, query: string): Element;

Utilities/Internal.js

@@ -1,1 +0,1 @@
-export function arrayEquals(r,n,t){if(void 0===t&&(t=function(r,n){return r===n}),!r||!n)return!1;if(r.length!==n.length)return!1;for(var e=0;e<r.length;e++)if(!t(r[e],n[e]))return!1;return!0};
+export function arrayEquals(r,t,e){if(void 0===e&&(e=function(r,t){return r===t}),!r||!t)return!1;if(r.length!==t.length)return!1;for(var n=0;n<r.length;n++)if(!e(r[n],t[n]))return!1;return!0};export function closest(r,t){if(r&&r.closest)return r.closest(t);for(;r&&!(r.matches||r.msMatchesSelector).call(r,t);)r=r.parentElement;return r};

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

337461

decreased by-11.22%

Number of package files

194

decreased by-21.14%

Lines of code

4235

decreased by-24.99%

Dependency changes

• + Addedoffice-ui-fabric-react@5.21.2(transitive)

• - Removedoffice-ui-fabric-react@5.9.3(transitive)

• Updatedoffice-ui-fabric-react@~5.21.1