vss-ui - npm Package Compare versions

Comparing version 3.124.6 to 3.125.0

Components/ContextualMenuButton/ContextualMenuButton.d.ts

@@ -6,2 +6,3 @@ /// <reference types="react" />
 import { IContextualMenuButtonProps } from "../../Components/ContextualMenuButton/ContextualMenuButton.Props";
+import "./ContextualMenuButton.css";
 export interface IContextualMenuButtonState {
@@ -8,0 +9,0 @@ providers: IVssContextualMenuItemProvider[] | undefined;

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";if("function"==typeof window.__webpack_require__){var require;require("./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,targetElement:this.refs[e.buttonRef],targetPoint:h,useTargetPoint:m}))},e.prototype._onClick=function(t){var e=this.props,o=e.onClick,s=e.useTargetPoint;t.stopPropagation(),o&&o(t),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){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};

Components/ContextualMenuButton/ContextualMenuButton.Props.d.ts

@@ -40,5 +40,7 @@ /// <reference types="react" />
     /**
-     * Click handler for the button, called before the menu is shown
+     * Click handler for the button, called before the menu is shown.
+     * If undefined or false are returned, ev.stopPropagation() will be called.
+     * Return true to allow the click event to propagate to parent elements.
      */
-    onClick?: (e: React.MouseEvent<HTMLElement>) => void;
+    onClick?: (e: React.MouseEvent<HTMLElement>) => void | boolean;
     /**
@@ -45,0 +47,0 @@ * Dismiss handler for the menu. Allows consumer of this component to perform

Components/DateTimePicker/DateTimePicker.d.ts

 /// <reference types="react" />
 import { BaseComponent } from "office-ui-fabric-react/lib/Utilities";
 import { IDateTimePickerProps } from "../../Components/DateTimePicker/DateTimePicker.Props";
+import "./DateTimePicker.css";
 export interface DateTimePickerState {
@@ -5,0 +6,0 @@ }

Components/DateTimePicker/DateTimePicker.js

@@ -1,1 +0,1 @@
-import*as tslib_1 from"tslib";import*as React from"react";import{DatePicker}from"office-ui-fabric-react/lib/DatePicker";import{TextField}from"office-ui-fabric-react/lib/TextField";import{autobind,BaseComponent,warn}from"office-ui-fabric-react/lib/Utilities";import*as Resources from"../../Resources/VSS.Resources.VSSUI";if("function"==typeof window.__webpack_require__){var require;require("./DateTimePicker.css")}var DateTimePicker=function(e){function t(t){var r=e.call(this,t)||this;return r._value=new Date,t&&("value"in t&&warn("'value' will be ignored. Use 'defaultValue'."),"onSelectDate"in t&&warn("'onSelectDate' will be ignored."),r._value=t.defaultValue),r}return tslib_1.__extends(t,e),t.prototype.render=function(){var e=this,t=this.props,r=t.formatTime,a=void 0===r?this._defaultformatTime:r,i=t.parseTimeFromString,o=void 0===i?this._defaultParseTimeFromString:i;return React.createElement("div",{className:"vss-DateTimePicker"},React.createElement("div",{className:"vss-DateTimePicker--dateField"},React.createElement(DatePicker,tslib_1.__assign({isMonthPickerVisible:!1},this.props,{value:this._value,ariaLabel:Resources.DateTimePicker_DateFieldAriaLabel,onSelectDate:function(t){e._value&&e._value.setFullYear(t.getFullYear(),t.getMonth(),t.getDate()),e.props.onValueChanged&&e.props.onValueChanged(e._value)}}))),React.createElement("div",{className:"vss-DateTimePicker--timeField"},React.createElement(TextField,{defaultValue:a(this._value),onGetErrorMessage:this._getErrorMessage,validateOnFocusOut:!0,ariaLabel:Resources.DateTimePicker_TimeFieldAriaLabel,onChanged:function(t){var r=o(t);r&&(e._value.setHours(r.getHours(),r.getMinutes(),r.getSeconds()),e.props.onValueChanged&&e.props.onValueChanged(e._value))}})))},t.prototype._getErrorMessage=function(e){var t=this.props.parseTimeFromString;return(void 0===t?this._defaultParseTimeFromString:t)(e)?"":Resources.DateTimePicker_CannotParseTime},t.prototype._defaultParseTimeFromString=function(e){var t=Date.parse(e);return t?new Date(t):null},t.prototype._defaultformatTime=function(e){return e?e.toLocaleTimeString():""},tslib_1.__decorate([autobind],t.prototype,"_getErrorMessage",null),t}(BaseComponent);export{DateTimePicker};
+import*as tslib_1 from"tslib";import*as React from"react";import{DatePicker}from"office-ui-fabric-react/lib/DatePicker";import{TextField}from"office-ui-fabric-react/lib/TextField";import{autobind,BaseComponent,warn}from"office-ui-fabric-react/lib/Utilities";import*as Resources from"../../Resources/VSS.Resources.VSSUI";import"./DateTimePicker.css";var DateTimePicker=function(e){function t(t){var a=e.call(this,t)||this;return a._value=new Date,t&&("value"in t&&warn("'value' will be ignored. Use 'defaultValue'."),"onSelectDate"in t&&warn("'onSelectDate' will be ignored."),a._value=t.defaultValue),a}return tslib_1.__extends(t,e),t.prototype.render=function(){var e=this,t=this.props,a=t.formatTime,r=void 0===a?this._defaultformatTime:a,i=t.parseTimeFromString,o=void 0===i?this._defaultParseTimeFromString:i;return React.createElement("div",{className:"vss-DateTimePicker"},React.createElement("div",{className:"vss-DateTimePicker--dateField"},React.createElement(DatePicker,tslib_1.__assign({isMonthPickerVisible:!1},this.props,{value:this._value,ariaLabel:Resources.DateTimePicker_DateFieldAriaLabel,onSelectDate:function(t){e._value&&e._value.setFullYear(t.getFullYear(),t.getMonth(),t.getDate()),e.props.onValueChanged&&e.props.onValueChanged(e._value)}}))),React.createElement("div",{className:"vss-DateTimePicker--timeField"},React.createElement(TextField,{defaultValue:r(this._value),onGetErrorMessage:this._getErrorMessage,validateOnFocusOut:!0,ariaLabel:Resources.DateTimePicker_TimeFieldAriaLabel,onChanged:function(t){var a=o(t);a&&(e._value.setHours(a.getHours(),a.getMinutes(),a.getSeconds()),e.props.onValueChanged&&e.props.onValueChanged(e._value))}})))},t.prototype._getErrorMessage=function(e){var t=this.props.parseTimeFromString;return(void 0===t?this._defaultParseTimeFromString:t)(e)?"":Resources.DateTimePicker_CannotParseTime},t.prototype._defaultParseTimeFromString=function(e){var t=Date.parse(e);return t?new Date(t):null},t.prototype._defaultformatTime=function(e){return e?e.toLocaleTimeString():""},tslib_1.__decorate([autobind],t.prototype,"_getErrorMessage",null),t}(BaseComponent);export{DateTimePicker};

Components/DateTimeRangePicker/DateTimeRangePicker.d.ts

 /// <reference types="react" />
 import { BaseComponent } from "office-ui-fabric-react/lib/Utilities";
 import { IDateTimeRangePickerProps } from "../../Components/DateTimeRangePicker/DateTimeRangePicker.Props";
+import "./DateTimeRangePicker.css";
 export interface DateTimeRangePickerState {
@@ -5,0 +6,0 @@ }

Components/DateTimeRangePicker/DateTimeRangePicker.js

@@ -1,1 +0,1 @@
-import*as tslib_1 from"tslib";import*as React from"react";import{BaseComponent}from"office-ui-fabric-react/lib/Utilities";import*as Resources from"../../Resources/VSS.Resources.VSSUI";import{DateTimePicker}from"../../DateTimePicker";if("function"==typeof window.__webpack_require__){var require;require("./DateTimeRangePicker.css")}var DateTimeRangePicker=function(e){function t(t){var a=e.call(this,t)||this;return t&&(a._startTime=t.defaultStartTime,a._endTime=t.defaultEndTime),a}return tslib_1.__extends(t,e),t.prototype.render=function(){var e=this;return React.createElement("div",{className:"vss-DateTimeRangePicker"},React.createElement("div",null,React.createElement("span",{className:"vss-DateTimeRangePicker--label"},Resources.DateTimeRangePicker_Start),React.createElement(DateTimePicker,{defaultValue:this._startTime,formatDate:this.props.formatDate,formatTime:this.props.formatTime,parseTimeFromString:this.props.parseTimeFromString,onValueChanged:function(t){e._startTime=t,e.props.onValueChanged&&e.props.onValueChanged(e._startTime,e._endTime)}})),React.createElement("div",null,React.createElement("span",{className:"vss-DateTimeRangePicker--label"},Resources.DateTimeRangePicker_End),React.createElement(DateTimePicker,{defaultValue:this._endTime,formatDate:this.props.formatDate,formatTime:this.props.formatTime,parseTimeFromString:this.props.parseTimeFromString,onValueChanged:function(t){e._endTime=t,e.props.onValueChanged&&e.props.onValueChanged(e._startTime,e._endTime)}})))},t}(BaseComponent);export{DateTimeRangePicker};
+import*as tslib_1 from"tslib";import*as React from"react";import{BaseComponent}from"office-ui-fabric-react/lib/Utilities";import*as Resources from"../../Resources/VSS.Resources.VSSUI";import{DateTimePicker}from"../../DateTimePicker";import"./DateTimeRangePicker.css";var DateTimeRangePicker=function(e){function t(t){var a=e.call(this,t)||this;return t&&(a._startTime=t.defaultStartTime,a._endTime=t.defaultEndTime),a}return tslib_1.__extends(t,e),t.prototype.render=function(){var e=this;return React.createElement("div",{className:"vss-DateTimeRangePicker"},React.createElement("div",null,React.createElement("span",{className:"vss-DateTimeRangePicker--label"},Resources.DateTimeRangePicker_Start),React.createElement(DateTimePicker,{defaultValue:this._startTime,formatDate:this.props.formatDate,formatTime:this.props.formatTime,parseTimeFromString:this.props.parseTimeFromString,onValueChanged:function(t){e._startTime=t,e.props.onValueChanged&&e.props.onValueChanged(e._startTime,e._endTime)}})),React.createElement("div",null,React.createElement("span",{className:"vss-DateTimeRangePicker--label"},Resources.DateTimeRangePicker_End),React.createElement(DateTimePicker,{defaultValue:this._endTime,formatDate:this.props.formatDate,formatTime:this.props.formatTime,parseTimeFromString:this.props.parseTimeFromString,onValueChanged:function(t){e._endTime=t,e.props.onValueChanged&&e.props.onValueChanged(e._startTime,e._endTime)}})))},t}(BaseComponent);export{DateTimeRangePicker};

Components/FileInput/FileInput.d.ts

 /// <reference types="react" />
 import { BaseComponent } from "office-ui-fabric-react/lib/Utilities";
 import { IFileInputProps, FileInputData } from "../../Components/FileInput/FileInput.Props";
+import "./FileInput.css";
 export interface FileInputState {
@@ -5,0 +6,0 @@ files?: FileInputData[];

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";if("function"==typeof window.__webpack_require__){var require;require("./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;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={display:"none"},i={display:"block"},r=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:r,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:t})))))),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:i},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 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;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);

Components/FilterBar/FilterBar.d.ts

 /// <reference types="react" />
 import { BaseComponent } from 'office-ui-fabric-react/lib/Utilities';
 import { IFilterBar, IFilterBarProps } from '../../Components/FilterBar/FilterBar.Props';
+import "./FilterBar.css";
 export interface IFilterBarState {
@@ -5,0 +6,0 @@ hasChangesToApply?: boolean;

Components/FilterBar/FilterBar.js

@@ -1,1 +0,1 @@
-import*as tslib_1 from"tslib";import*as React from"react";import{CommandButton}from"office-ui-fabric-react/lib/Button";import{autobind,BaseComponent,css}from"office-ui-fabric-react/lib/Utilities";import{Filter,FILTER_CHANGE_EVENT,FILTER_APPLIED_EVENT}from"../../Utilities/Filter";import*as VSSUIResources from"../../Resources/VSS.Resources.VSSUI";if("function"==typeof window.__webpack_require__){var require;require("./FilterBar.css")}var FilterBar=function(e){function t(t){var s=e.call(this,t)||this;if(!t.filter)throw new Error("Cannot create a FilterBar without a filter prop.");return s.state={hasChangesToReset:t.filter.hasChangesToReset(),hasChangesToApply:t.filter.hasChangesToApply()},s}return tslib_1.__extends(t,e),t.prototype.focus=function(){this._filterItemRefs&&this._filterItemRefs.length>0&&this._filterItemRefs[0].focus()},t.prototype.forceUpdate=function(){e.prototype.forceUpdate.call(this),this._filterItemRefs&&this._filterItemRefs.forEach(function(e){return e.forceUpdate()})},t.prototype.componentDidMount=function(){this._events.on(this.props.filter,FILTER_CHANGE_EVENT,this._onFilterChanged),this._events.on(this.props.filter,FILTER_APPLIED_EVENT,this._onFilterApplied),this.props.onMounted&&this.props.onMounted(this)},t.prototype.componentWillUnmount=function(){this._events.off(this.props.filter,FILTER_CHANGE_EVENT,this._onFilterChanged),this._events.off(this.props.filter,FILTER_APPLIED_EVENT,this._onFilterApplied)},t.prototype.componentDidUpdate=function(){this.props.onRenderComplete&&this.props.onRenderComplete()},t.prototype.render=function(){var e=this,t=this.props,s=t.children,r=t.filter,i=t.className,o=this.state,a=o.hasChangesToApply,n=o.hasChangesToReset;this._filterItemRefs=[];var l=React.Children.map(s,function(t){if(null===t)return null;var s=t,i=React.cloneElement(s,{filter:s.props.filter||r,ref:function(t){t&&e._filterItemRefs.push(t)}});return React.createElement("div",{className:"vss-FilterBar--item"},i)}),p=Filter.statesAreEqual(r.getDefaultState(),{})?VSSUIResources.ClearFilterBarLinkText:VSSUIResources.ResetFilterBarLinkText;return React.createElement("div",{className:css("vss-FilterBar",i)},React.createElement("div",{className:"vss-FilterBar--list"},l,React.createElement("div",{className:"vss-FilterBar--action vss-FilterBar--action-clear"},React.createElement(CommandButton,{disabled:!n,onClick:this._onReset,iconProps:{iconName:"Clear"},ariaLabel:VSSUIResources.ClearFilterBarLinkAriaLabel},p)),r.usesApplyMode()&&React.createElement("div",{className:"vss-FilterBar--action vss-FilterBar--action-apply"},React.createElement(CommandButton,{disabled:!a,onClick:this._onApplyChanges,iconProps:{iconName:"CheckMark"}},VSSUIResources.ApplyChangesFilterBarText))))},t.prototype._onFilterChanged=function(e){var t=this.props.filter.hasChangesToApply(),s=this.props.filter.hasChangesToReset();t===this.state.hasChangesToApply&&s===this.state.hasChangesToReset||this.setState({hasChangesToApply:this.props.filter.hasChangesToApply(),hasChangesToReset:this.props.filter.hasChangesToReset()})},t.prototype._onFilterApplied=function(e){var t=this.props.filter.hasChangesToApply();t!==this.state.hasChangesToApply&&this.setState({hasChangesToApply:t})},t.prototype._onReset=function(){this.props.filter.reset(),this.focus()},t.prototype._onApplyChanges=function(){this.props.filter.applyChanges(),this.focus()},tslib_1.__decorate([autobind],t.prototype,"_onFilterChanged",null),tslib_1.__decorate([autobind],t.prototype,"_onFilterApplied",null),tslib_1.__decorate([autobind],t.prototype,"_onReset",null),tslib_1.__decorate([autobind],t.prototype,"_onApplyChanges",null),t}(BaseComponent);export{FilterBar};
+import*as tslib_1 from"tslib";import*as React from"react";import{CommandButton}from"office-ui-fabric-react/lib/Button";import{autobind,BaseComponent,css}from"office-ui-fabric-react/lib/Utilities";import{Filter,FILTER_CHANGE_EVENT,FILTER_APPLIED_EVENT}from"../../Utilities/Filter";import*as VSSUIResources from"../../Resources/VSS.Resources.VSSUI";import"./FilterBar.css";var FilterBar=function(e){function t(t){var s=e.call(this,t)||this;if(!t.filter)throw new Error("Cannot create a FilterBar without a filter prop.");return s.state={hasChangesToReset:t.filter.hasChangesToReset(),hasChangesToApply:t.filter.hasChangesToApply()},s}return tslib_1.__extends(t,e),t.prototype.focus=function(){this._filterItemRefs&&this._filterItemRefs.length>0&&this._filterItemRefs[0].focus()},t.prototype.forceUpdate=function(){e.prototype.forceUpdate.call(this),this._filterItemRefs&&this._filterItemRefs.forEach(function(e){return e.forceUpdate()})},t.prototype.componentDidMount=function(){this._events.on(this.props.filter,FILTER_CHANGE_EVENT,this._onFilterChanged),this._events.on(this.props.filter,FILTER_APPLIED_EVENT,this._onFilterApplied),this.props.onMounted&&this.props.onMounted(this)},t.prototype.componentWillUnmount=function(){this._events.off(this.props.filter,FILTER_CHANGE_EVENT,this._onFilterChanged),this._events.off(this.props.filter,FILTER_APPLIED_EVENT,this._onFilterApplied)},t.prototype.componentDidUpdate=function(){this.props.onRenderComplete&&this.props.onRenderComplete()},t.prototype.render=function(){var e=this,t=this.props,s=t.children,o=t.filter,r=t.className,i=this.state,a=i.hasChangesToApply,n=i.hasChangesToReset;this._filterItemRefs=[];var l=React.Children.map(s,function(t){if(null===t)return null;var s=t,r=React.cloneElement(s,{filter:s.props.filter||o,ref:function(t){t&&e._filterItemRefs.push(t)}});return React.createElement("div",{className:"vss-FilterBar--item"},r)}),p=Filter.statesAreEqual(o.getDefaultState(),{})?VSSUIResources.ClearFilterBarLinkText:VSSUIResources.ResetFilterBarLinkText;return React.createElement("div",{className:css("vss-FilterBar",r)},React.createElement("div",{className:"vss-FilterBar--list"},l,React.createElement("div",{className:"vss-FilterBar--action vss-FilterBar--action-clear"},React.createElement(CommandButton,{disabled:!n,onClick:this._onReset,iconProps:{iconName:"Clear"},ariaLabel:VSSUIResources.ClearFilterBarLinkAriaLabel},p)),o.usesApplyMode()&&React.createElement("div",{className:"vss-FilterBar--action vss-FilterBar--action-apply"},React.createElement(CommandButton,{disabled:!a,onClick:this._onApplyChanges,iconProps:{iconName:"CheckMark"}},VSSUIResources.ApplyChangesFilterBarText))))},t.prototype._onFilterChanged=function(e){var t=this.props.filter.hasChangesToApply(),s=this.props.filter.hasChangesToReset();t===this.state.hasChangesToApply&&s===this.state.hasChangesToReset||this.setState({hasChangesToApply:this.props.filter.hasChangesToApply(),hasChangesToReset:this.props.filter.hasChangesToReset()})},t.prototype._onFilterApplied=function(e){var t=this.props.filter.hasChangesToApply();t!==this.state.hasChangesToApply&&this.setState({hasChangesToApply:t})},t.prototype._onReset=function(){this.props.filter.reset(),this.focus()},t.prototype._onApplyChanges=function(){this.props.filter.applyChanges(),this.focus()},tslib_1.__decorate([autobind],t.prototype,"_onFilterChanged",null),tslib_1.__decorate([autobind],t.prototype,"_onFilterApplied",null),tslib_1.__decorate([autobind],t.prototype,"_onReset",null),tslib_1.__decorate([autobind],t.prototype,"_onApplyChanges",null),t}(BaseComponent);export{FilterBar};

Components/Hub/Hub.d.ts

@@ -6,2 +6,3 @@ /// <reference types="react" />
 import { IPivotBarViewAction, PivotBarFocusItem } from '../../PivotBar';
+import "./Hub.css";
 export interface IHubState {
@@ -8,0 +9,0 @@ selectedPivot?: string;

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";if("function"==typeof window.__webpack_require__){var require;require("./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,r=i.commands,n=i.hideHeader,s=i.hubViewState,c=i.onRenderFilterBar,a=i.pivotProviders,l=i.onPivotBarRenderComplete,p=i.showFilterBarInline,u=i.useShadowStyle,d=this.state,v=d.selectedPivot,h=d.viewActions,b=d.inFullScreenMode,f={onPivotClicked:this._onPivotClicked,commands:r,selectedPivot:v,viewOptions:s.viewOptions,filter:s.filter,pivotProviders:a,showPivots:!b&&void 0,onRenderComplete:l,viewActions:h,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:n}),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,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};

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 "./HubBreadcrumb.css";
 export declare const HEADER_PICKER_CHANGE_EVENT = "header-picker-changed";
@@ -5,0 +6,0 @@ /**

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";if("function"==typeof window.__webpack_require__){var require;require("./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),l=e.headerItemPicker&&!!e.onClick;if(e.headerItemPicker){var m=null;return l&&(m=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,m)))}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,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};

Components/HubHeader/HubHeader.d.ts

@@ -5,2 +5,3 @@ /// <reference types="react" />
 import { IHubHeaderProps } from "../../Components/HubHeader/HubHeader.Props";
+import "./HubHeader.css";
 export interface IHubHeaderState {
@@ -7,0 +8,0 @@ headerItemPicker?: IHeaderItemPicker;

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";if("function"==typeof window.__webpack_require__){var require;require("./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,d=o?void 0:this.onClick,m={key:"title-item",text:n||l,leftIconProps:s,onClick:d,onSelectionChanged:this.onSelectionChanged,headerItemPicker:a};e.push(m)}else if(n){m={key:"title-item",text:n,leftIconProps:s};e.push(m)}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{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};

Components/HubHeader/HubTileRegion.d.ts

 /// <reference types="react" />
 import { BaseComponent } from "office-ui-fabric-react/lib/Utilities";
+import "./HubTileRegion.css";
 /**
@@ -4,0 +5,0 @@ * Component that contains hub tiles to be displayed in the PivotBar.

Components/HubHeader/HubTileRegion.js

@@ -1,1 +0,1 @@
-import*as tslib_1 from"tslib";import*as React from"react";import{BaseComponent,css}from"office-ui-fabric-react/lib/Utilities";if("function"==typeof window.__webpack_require__){var require;require("./HubTileRegion.css")}var HubTileRegion=function(e){function i(){return null!==e&&e.apply(this,arguments)||this}return tslib_1.__extends(i,e),i.prototype.render=function(){var e=css("vss-HubTileRegion"),i=React.Children.toArray(this.props.children),r=React.Children.map(i||[],function(e,i){var r=e.props,t=r&&r.className,s=tslib_1.__assign({},r,{className:t?t+" vss-HubTile":"vss-HubTile"});return React.cloneElement(e,s)});return React.createElement("div",{className:e},r)},i}(BaseComponent);export{HubTileRegion};
+import*as tslib_1 from"tslib";import*as React from"react";import{BaseComponent,css}from"office-ui-fabric-react/lib/Utilities";import"./HubTileRegion.css";var HubTileRegion=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return tslib_1.__extends(t,e),t.prototype.render=function(){var e=css("vss-HubTileRegion"),t=React.Children.toArray(this.props.children),i=React.Children.map(t||[],function(e,t){var i=e.props,s=i&&i.className,r=tslib_1.__assign({},i,{className:s?s+" vss-HubTile":"vss-HubTile"});return React.cloneElement(e,r)});return React.createElement("div",{className:e},i)},t}(BaseComponent);export{HubTileRegion};

Components/HubHeader/HubTitle.d.ts

 /// <reference types="react" />
 import { BaseComponent } from "office-ui-fabric-react/lib/Utilities";
 import { IHubTitleProps } from "../../Components/HubHeader/HubTitle.Props";
+import "./HubTitle.css";
 export interface IHubTitleState {
@@ -5,0 +6,0 @@ isFavorited?: boolean;

Components/HubHeader/HubTitle.js

@@ -1,1 +0,1 @@
-import*as tslib_1 from"tslib";import*as React from"react";import{BaseComponent,css}from"office-ui-fabric-react/lib/Utilities";import{VssIcon}from"../../VssIcon";if("function"==typeof window.__webpack_require__){var require;require("./HubTitle.css")}var HubTitle=function(t){function e(e){return t.call(this,e)||this}return tslib_1.__extends(e,t),e.prototype.getIcon=function(){if(this.props.iconProps){var t=tslib_1.__assign({},this.props.iconProps,{className:css(this.props.iconProps.className,"vss-HubTitle-titleIcon")});return React.createElement(VssIcon,tslib_1.__assign({},t))}return null},e.prototype.getTitleText=function(){return React.createElement("div",{className:"vss-HubTitle--titleText"},this.props.titleText)},e.prototype.render=function(){var t=css("vss-HubTitle");return React.createElement("h1",{className:t,onClick:this.props.onClick},this.getIcon(),this.getTitleText())},e}(BaseComponent);export{HubTitle};
+import*as tslib_1 from"tslib";import*as React from"react";import{BaseComponent,css}from"office-ui-fabric-react/lib/Utilities";import{VssIcon}from"../../VssIcon";import"./HubTitle.css";var HubTitle=function(t){function e(e){return t.call(this,e)||this}return tslib_1.__extends(e,t),e.prototype.getIcon=function(){if(this.props.iconProps){var t=tslib_1.__assign({},this.props.iconProps,{className:css(this.props.iconProps.className,"vss-HubTitle-titleIcon")});return React.createElement(VssIcon,tslib_1.__assign({},t))}return null},e.prototype.getTitleText=function(){return React.createElement("div",{className:"vss-HubTitle--titleText"},this.props.titleText)},e.prototype.render=function(){var t=css("vss-HubTitle");return React.createElement("h1",{className:t,onClick:this.props.onClick},this.getIcon(),this.getTitleText())},e}(BaseComponent);export{HubTitle};

Components/IconToggleButton/IconToggleButton.d.ts

 /// <reference types="react" />
 import { BaseComponent } from "office-ui-fabric-react/lib/Utilities";
 import { IIconToggleButtonProps } from "../../Components/IconToggleButton/IconToggleButton.Props";
+import "./IconToggleButton.css";
 /**
@@ -5,0 +6,0 @@ * Allows user to set 2 different icons for a button and switch between them on clicks

Components/IconToggleButton/IconToggleButton.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{autobind,BaseComponent,css}from"office-ui-fabric-react/lib/Utilities";import{VssIcon}from"../../VssIcon";if("function"==typeof window.__webpack_require__){var require;require("./IconToggleButton.css")}var IconToggleButton=function(o){function t(){return null!==o&&o.apply(this,arguments)||this}return tslib_1.__extends(t,o),t.prototype.render=function(){var o=this.props,t=o.className,n=o.isToggledOn,e=(o.onToggle,o.toggledOffIconProps),i=o.toggledOnIconProps,r=css("vss-IconToggleButton","icon-toggle-button",t,{"is-toggled-on":n});return React.createElement(IconButton,{className:r,onClick:this._onClick,iconProps:VssIcon.getIconProps(n?i:e)})},t.prototype._onClick=function(o){o.preventDefault(),this.props.onToggle&&this.props.onToggle(!this.props.isToggledOn)},tslib_1.__decorate([autobind],t.prototype,"_onClick",null),t}(BaseComponent);export{IconToggleButton};
+import*as tslib_1 from"tslib";import*as React from"react";import{IconButton}from"office-ui-fabric-react/lib/Button";import{autobind,BaseComponent,css}from"office-ui-fabric-react/lib/Utilities";import{VssIcon}from"../../VssIcon";import"./IconToggleButton.css";var IconToggleButton=function(o){function t(){return null!==o&&o.apply(this,arguments)||this}return tslib_1.__extends(t,o),t.prototype.render=function(){var o=this.props,t=o.className,n=o.isToggledOn,e=(o.onToggle,o.toggledOffIconProps),s=o.toggledOnIconProps,i=css("vss-IconToggleButton","icon-toggle-button",t,{"is-toggled-on":n});return React.createElement(IconButton,{className:i,onClick:this._onClick,iconProps:VssIcon.getIconProps(n?s:e)})},t.prototype._onClick=function(o){o.preventDefault(),this.props.onToggle&&this.props.onToggle(!this.props.isToggledOn)},tslib_1.__decorate([autobind],t.prototype,"_onClick",null),t}(BaseComponent);export{IconToggleButton};

Components/ItemIndicator/ItemIndicator.d.ts

@@ -5,2 +5,3 @@ /// <reference types="react" />
 import { IVssIconProps } from "../../VssIcon";
+import "./ItemIndicator.css";
 export interface IItemIndicatorState {
@@ -7,0 +8,0 @@ iconProps?: IVssIconProps | undefined;

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";if("function"==typeof window.__webpack_require__){var require;require("./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}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};

Components/PickList/PickList.d.ts

 /// <reference types="react" />
 import { BaseComponent } from 'office-ui-fabric-react/lib/Utilities';
 import { IPickList, IPickListItem, IPickListProps } from '../../Components/PickList/PickList.Props';
+import "./PickList.css";
 export interface IPickListState {
@@ -5,0 +6,0 @@ /**

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";if("function"==typeof window.__webpack_require__){var require;require("./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=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=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}),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){(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,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{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}),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){(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);

Components/PickList/PickList.Props.d.ts

@@ -261,2 +261,7 @@ /// <reference types="react" />
     disabled?: boolean;
+    /**
+     * If false, dropdown will dismiss when the target element scrolls.
+     * @defaultValue true
+     */
+    preventDismissOnScroll?: boolean;
 }
@@ -263,0 +268,0 @@ export interface IPickListDropdown {

Components/PickList/PickListDropdown.d.ts

 /// <reference types="react" />
 import { BaseComponent } from 'office-ui-fabric-react/lib/Utilities';
 import { IPickListDropdown, IPickListDropdownProps } from '../../Components/PickList/PickList.Props';
+import "./PickListDropdown.css";
 export interface IPickListDropdownState {
@@ -5,0 +6,0 @@ isListOpen: boolean;

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{DirectionalHint}from"office-ui-fabric-react/lib/common/DirectionalHint";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";if("function"==typeof window.__webpack_require__){var require;require("./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=this.state.isListOpen,l=n&&n.length>0,p=l?this._getTitleText():s,d=css("vss-PickListDropdown",e),_=css("vss-PickListDropdown--list",o),h=p;return this.props.ariaLabelFormat&&(h=format(this.props.ariaLabelFormat,l?p:"")),React.createElement("div",{className:d,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":!l,disabled:r,focused:a}),"aria-expanded":a,"aria-label":h,"aria-disabled":!!r,role:"combobox"},l&&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:p,overflowMode:TooltipOverflowMode.Parent},React.createElement("span",{className:"vss-PickListDropdown--title-text",role:"textbox","aria-readonly":!0},p))),React.createElement(VssIcon,{className:"vss-PickListDropdown--title-caretIcon",iconType:VssIconType.fabric,iconName:"ChevronDown"})),a&&React.createElement(Callout,{onDismiss:this._onDismiss,onPositioned:this._onPositioned,targetElement:this._dropdown,isBeakVisible:!1,preventDismissOnScroll:!0,gapSpace:0,directionalHint:DirectionalHint.bottomLeftEdge},React.createElement(PickList,tslib_1.__assign({},this.props,{width:this.state.pickListWidth,className:_,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,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};

Components/PivotBar/PivotBar.d.ts

@@ -10,2 +10,3 @@ /// <reference types="react" />
 import { IObservableArray, IObservableValue } from '../../Utilities/Observable';
+import "./PivotBar.css";
 export interface IPivotBarState {
@@ -12,0 +13,0 @@ selectedPivot?: string;

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";if("function"==typeof window.__webpack_require__){var require;require("./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)});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}},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{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}();

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,DirectionalHint}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()?DirectionalHint.bottomLeftEdge:DirectionalHint.bottomRightEdge,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,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);

Components/VssContextualMenu/VssContextualMenu.d.ts

 /// <reference types="react" />
 import { BaseComponent } from 'office-ui-fabric-react/lib/Utilities';
 import { IVssContextualMenuItem, IVssContextualMenuProps } from '../../Components/VssContextualMenu/VssContextualMenu.Props';
+import "./VssContextualMenu.css";
 /**
@@ -5,0 +6,0 @@ * State this component manages

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";if("function"==typeof window.__webpack_require__){var require;require("./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 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;return e&&e.length>t&&t>-1&&(e.item(t).focus(),i=!0),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++){p=u[r];i[p.key]={key:p.key,name:p.name,rank:void 0===p.rank?++n:p.rank,showGroupName:p.showGroupName,items:[]}}}else this._groups=[];if(t)for(var a=0,m=t;a<m.length;a++){var p=m[a];i[p.key]||(i[p.key]={key:p.key,name:p.name,rank:void 0===p.rank?++n:p.rank,showGroupName:p.showGroupName,items:[]},this._groups.push(p))}for(var c=0,l=e;c<l.length;c++){var h=l[c];h.groupKey?i[h.groupKey]?i[h.groupKey].items.push(h):i[h.groupKey]={key:h.groupKey,name:h.groupKey,rank:++n,items:[h]}:o.push(h)}var f=Object.keys(i).map(function(e){return i[e]});f.sort(function(e,t){return(e.rank||Number.MAX_VALUE)-(t.rank||Number.MAX_VALUE)}),f.push({key:"ungrouped",name:"Ungrouped",rank:++n,items:o}),f.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 d=!0,_=0,v=f;_<v.length;_++)(0!==(p=v[_]).items.length||s)&&(p.showGroupName&&p.name||s?e.push({key:"group_"+p.name,itemType:ContextualMenuItemType.Header,name:s?p.name+" (key: "+p.key+")":p.name}):d||e.push({key:"divider_"+p.name,itemType:ContextualMenuItemType.Divider}),d&&(d=!1),e=e.concat(p.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=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;return e&&e.length>t&&t>-1&&(e.item(t).focus(),i=!0),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++){p=u[r];i[p.key]={key:p.key,name:p.name,rank:void 0===p.rank?++n:p.rank,showGroupName:p.showGroupName,items:[]}}}else this._groups=[];if(t)for(var a=0,m=t;a<m.length;a++){var p=m[a];i[p.key]||(i[p.key]={key:p.key,name:p.name,rank:void 0===p.rank?++n:p.rank,showGroupName:p.showGroupName,items:[]},this._groups.push(p))}for(var c=0,l=e;c<l.length;c++){var h=l[c];h.groupKey?i[h.groupKey]?i[h.groupKey].items.push(h):i[h.groupKey]={key:h.groupKey,name:h.groupKey,rank:++n,items:[h]}:o.push(h)}var f=Object.keys(i).map(function(e){return i[e]});f.sort(function(e,t){return(e.rank||Number.MAX_VALUE)-(t.rank||Number.MAX_VALUE)}),f.push({key:"ungrouped",name:"Ungrouped",rank:++n,items:o}),f.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 d=!0,_=0,v=f;_<v.length;_++)(0!==(p=v[_]).items.length||s)&&(p.showGroupName&&p.name||s?e.push({key:"group_"+p.name,itemType:ContextualMenuItemType.Header,name:s?p.name+" (key: "+p.key+")":p.name}):d||e.push({key:"divider_"+p.name,itemType:ContextualMenuItemType.Divider}),d&&(d=!1),e=e.concat(p.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/VssDetailsList.d.ts

@@ -5,2 +5,3 @@ /// <reference types="react" />
 import { IVssDetailsListProps } from '../../Components/VssDetailsList/VssDetailsList.Props';
+import "./VssDetailsList.css";
 export interface IVssDetailsListState {
@@ -7,0 +8,0 @@ /**

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";if("function"==typeof window.__webpack_require__){var require;require("./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,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}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};

Components/VssIcon/VssIcon.d.ts

@@ -5,2 +5,4 @@ /// <reference types="react" />
 import { IVssIconProps } from '../../Components/VssIcon/VssIcon.Props';
+import 'VSS/LoaderPlugins/Css!./VssIcon';
+import "./VssIcon.css";
 export declare class VssIcon extends BaseComponent<IVssIconProps, {}> {
@@ -7,0 +9,0 @@ private static readonly bowtieIconPrefix;

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";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,s.iconName="None"}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{VssIconType}from"../../Components/VssIcon/VssIcon.Props";import"VSS/LoaderPlugins/Css!./VssIcon";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};

Components/VssPersona/VssPersona.d.ts

 /// <reference types="react" />
 import { BaseComponent } from "office-ui-fabric-react/lib/Utilities";
 import { IVssPersonaProps } from "../../Components/VssPersona/VssPersona.Props";
+import "./VssPersona.css";
 export interface IVssPersonaState {
@@ -5,0 +6,0 @@ imageUrl: string;

Components/VssPersona/VssPersona.js

@@ -1,1 +0,1 @@
-import*as tslib_1 from"tslib";import*as React from"react";import{BaseComponent,css}from"office-ui-fabric-react/lib/Utilities";if("function"==typeof window.__webpack_require__){var require;require("./VssPersona.css")}var VssPersona=function(e){function t(t){var s=e.call(this,t)||this;return s.state={showPersonaCard:!1,imageUrl:s._getImageUrl(t)},s}return tslib_1.__extends(t,e),t.prototype.componentWillReceiveProps=function(e){this.state={showPersonaCard:!1,imageUrl:this._getImageUrl(e)}},t.prototype.shouldComponentUpdate=function(e,t){return!(!this.props.identityDetailsProvider&&!e.identityDetailsProvider)&&(!this.props.identityDetailsProvider||!e.identityDetailsProvider||(this.props.size!==e.size||this.props.cssClass!==e.cssClass||this.props.identityDetailsProvider!==e.identityDetailsProvider||this.state.showPersonaCard!==t.showPersonaCard))},t.prototype.render=function(){var e,t=this,s=this.props,r=s.identityDetailsProvider,i=s.size,a=void 0===i?"medium":i,o=css("vss-Persona",this.props.cssClass);return"number"==typeof a?(e={width:a,height:a},a):(o=css(o,a),this._getSize(a)),React.createElement("div",{className:o},React.createElement("img",{ref:function(e){t.imageElement=e},style:e,src:this.state.imageUrl,"aria-label":r.getDisplayName(),onClick:!this.props.suppressPersonaCard&&function(){return t._setPersonaCardVisible(!0)}}),this.state.showPersonaCard&&!this.props.suppressPersonaCard&&r.onRenderPersonaCard&&r.onRenderPersonaCard(this.imageElement,function(){t._setPersonaCardVisible(!1)}))},t.prototype._setPersonaCardVisible=function(e){this.setState({showPersonaCard:e})},t.prototype._getImageUrl=function(e){var t=this.props,s=t.identityDetailsProvider,r=t.size,i=void 0===r?"medium":r,a="number"==typeof i?i:this._getSize(i);return s.getIdentityImageUrl(a)},t.prototype._getSize=function(e){switch(e){case"extra-extra-small":return 16;case"extra-small":return 18;case"small":return 24;case"small-plus":return 28;case"medium":return 32;case"medium-plus":return 40;default:case"large":return 48;case"extra-large":return 72}},t}(BaseComponent);export{VssPersona};
+import*as tslib_1 from"tslib";import*as React from"react";import{BaseComponent,css}from"office-ui-fabric-react/lib/Utilities";import"./VssPersona.css";var VssPersona=function(e){function t(t){var s=e.call(this,t)||this;return s.state={showPersonaCard:!1,imageUrl:s._getImageUrl(t)},s}return tslib_1.__extends(t,e),t.prototype.componentWillReceiveProps=function(e){this.state={showPersonaCard:!1,imageUrl:this._getImageUrl(e)}},t.prototype.shouldComponentUpdate=function(e,t){return!(!this.props.identityDetailsProvider&&!e.identityDetailsProvider)&&(!this.props.identityDetailsProvider||!e.identityDetailsProvider||(this.props.size!==e.size||this.props.cssClass!==e.cssClass||this.props.identityDetailsProvider!==e.identityDetailsProvider||this.state.showPersonaCard!==t.showPersonaCard))},t.prototype.render=function(){var e,t=this,s=this.props,r=s.identityDetailsProvider,i=s.size,a=void 0===i?"medium":i,o=css("vss-Persona",this.props.cssClass);return"number"==typeof a?(e={width:a,height:a},a):(o=css(o,a),this._getSize(a)),React.createElement("div",{className:o},React.createElement("img",{ref:function(e){t.imageElement=e},style:e,src:this.state.imageUrl,"aria-label":r.getDisplayName(),onClick:!this.props.suppressPersonaCard&&function(){return t._setPersonaCardVisible(!0)}}),this.state.showPersonaCard&&!this.props.suppressPersonaCard&&r.onRenderPersonaCard&&r.onRenderPersonaCard(this.imageElement,function(){t._setPersonaCardVisible(!1)}))},t.prototype._setPersonaCardVisible=function(e){this.setState({showPersonaCard:e})},t.prototype._getImageUrl=function(e){var t=this.props,s=t.identityDetailsProvider,r=t.size,i=void 0===r?"medium":r,a="number"==typeof i?i:this._getSize(i);return s.getIdentityImageUrl(a)},t.prototype._getSize=function(e){switch(e){case"extra-extra-small":return 16;case"extra-small":return 18;case"small":return 24;case"small-plus":return 28;case"medium":return 32;case"medium-plus":return 40;default:case"large":return 48;case"extra-large":return 72}},t}(BaseComponent);export{VssPersona};

Components/ZeroData/ZeroData.d.ts

 /// <reference types="react" />
 import { BaseComponent } from "office-ui-fabric-react/lib/Utilities";
 import { IZeroDataProps } from "../../Components/ZeroData/ZeroData.Props";
+import "./ZeroData.css";
 /**
@@ -5,0 +6,0 @@ * Component for displaying helpful information when there is no data to show.

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";if("function"==typeof window.__webpack_require__){var require;require("./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{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);

package.json

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

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="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 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...";

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

Improved metrics

Total package byte prevSize

380165

increased by0.27%

Number of package files

246

increased by0.41%

Lines of code

5647

increased by1.07%

Dependency changes

• + Added@types/prop-types@15.7.13(transitive)

• + Added@types/react@16.14.61(transitive)

• + Added@types/react-dom@16.9.24(transitive)

• + Added@types/scheduler@0.16.8(transitive)

• + Added@uifabric/icons@5.8.0(transitive)

• + Added@uifabric/merge-styles@5.17.1(transitive)

• + Added@uifabric/styling@5.37.0(transitive)

• + Added@uifabric/utilities@5.34.3(transitive)

• + Addedcsstype@3.1.3(transitive)

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

• - Removed@babel/runtime@7.25.6(transitive)

• - Removed@uifabric/styling@0.24.2(transitive)

• - Removed@uifabric/utilities@4.16.0(transitive)

• - Removedasap@2.0.6(transitive)

• - Removedbowser@1.9.4(transitive)

• - Removedcore-js@1.2.7(transitive)

• - Removedcss-in-js-utils@2.0.1(transitive)

• - Removedencoding@0.1.13(transitive)

• - Removedfbjs@0.8.18(transitive)

• - Removedglamor@2.20.40(transitive)

• - Removedhyphenate-style-name@1.1.0(transitive)

• - Removediconv-lite@0.6.3(transitive)

• - Removedinline-style-prefixer@3.0.8(transitive)

• - Removedis-stream@1.1.0(transitive)

• - Removedisobject@3.0.1(transitive)

• - Removedisomorphic-fetch@2.2.1(transitive)

• - Removednode-fetch@1.7.3(transitive)

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

• - Removedpromise@7.3.1(transitive)

• - Removedregenerator-runtime@0.14.1(transitive)

• - Removedrtl-css-js@1.16.1(transitive)

• - Removedsafer-buffer@2.1.2(transitive)

• - Removedsetimmediate@1.0.5(transitive)

• - Removedthrough@2.3.8(transitive)

• - Removedua-parser-js@0.7.39(transitive)

• - Removedwhatwg-fetch@3.6.20(transitive)

• Updatedoffice-ui-fabric-react@~5.9.0