vss-ui - npm Package Compare versions

Comparing version 3.127.0 to 3.127.1

Components/ContextualMenuButton/ContextualMenuButton.js

@@ -1,1 +0,135 @@
-import*as tslib_1 from"tslib";import*as React from"react";import{DefaultButton,PrimaryButton}from"office-ui-fabric-react/lib/Button";import{Icon}from"office-ui-fabric-react/lib/Icon";import{TooltipHost}from"office-ui-fabric-react/lib/Tooltip";import{autobind,BaseComponent,css,getId,getNativeProps,buttonProperties}from"office-ui-fabric-react/lib/Utilities";import{VssContextualMenu}from"../../VssContextualMenu";import{VssIcon}from"../../VssIcon";import"./ContextualMenuButton.css";var ContextualMenuButton=function(t){function e(e){var o=t.call(this,e)||this;return o._warnDeprecations({targetPoint:"target",useTargetPoint:"target"}),o}return tslib_1.__extends(e,t),e.prototype.focus=function(){this._button&&this._button.focus&&this._button.focus()},e.prototype.componentWillReceiveProps=function(t){t.isOpen&&!this.state.items&&this.setState({items:this.props.getItems(),providers:this.props.getItemProviders?this.props.getItemProviders():[]})},e.prototype.componentWillMount=function(){this.props.isOpen?this.state={isOpen:!0,providers:this.props.getItemProviders?this.props.getItemProviders():[],items:this.props.getItems()}:this.state={items:void 0,providers:void 0,isOpen:!1},this._contextMenuExpandedId=getId("context-menu-expanded")},e.prototype.componentDidMount=function(){t.prototype.componentDidMount.call(this),this._isMounted=!0},e.prototype.componentWillUnmount=function(){this._isMounted=!1,t.prototype.componentWillUnmount.call(this)},e.prototype.render=function(){var t=this,o=this.props,s=o.className,i=o.ctaButton,n=o.directionalHint,r=o.iconProps,a=o.showTooltip,p=o.title,u=o.allocateSpaceWhileHidden,c=this.state.isOpen||this.props.isOpen||!1,l=this.state.target||this.props.target||this.props.targetPoint,m=this.state.useTargetPoint||this.props.useTargetPoint;void 0===m&&(m=l&&void 0!==l.x&&void 0!==l.y);var d,h=tslib_1.__assign({},getNativeProps(this.props,buttonProperties),{componentRef:function(e){return t._button=e},onClick:this._onClick,ariaLabel:p,className:css("vss-ContextualMenuButton","contextual-menu-button",s,{open:c,"space-allocated":u,"space-unallocated":!u}),"aria-haspopup":!0,"aria-expanded":c,"aria-controls":c?this._contextMenuExpandedId:null});d=r?React.createElement(Icon,tslib_1.__assign({},VssIcon.getIconProps(r))):null;var f;return f=i?React.createElement(PrimaryButton,tslib_1.__assign({},h),d):React.createElement(DefaultButton,tslib_1.__assign({},h),d),p&&a&&(f=React.createElement(TooltipHost,{content:p},f)),React.createElement("div",{className:e.ButtonContainerClassName,ref:e.buttonRef},f,c&&this.state.items&&React.createElement(VssContextualMenu,{providers:this.state.providers,items:this.state.items,onDismiss:this._onDismiss,shouldFocusOnMount:!0,gapSpace:m?5:0,directionalHint:n,target:l||this.refs[e.buttonRef]}))},e.prototype._onClick=function(t){var e=this.props,o=e.onClick,s=e.useTargetPoint;o&&o(t)||t.stopPropagation(),this.setState({items:this.props.getItems()}),t.clientX&&s?this.setState({isOpen:!0,providers:this.props.getItemProviders?this.props.getItemProviders():[],useTargetPoint:!0,target:{x:t.clientX,y:t.clientY}}):this.setState({isOpen:!0,providers:this.props.getItemProviders?this.props.getItemProviders():[],useTargetPoint:!1})},e.prototype._onDismiss=function(){this._isMounted&&(this.props.onDismiss&&this.props.onDismiss(),this.setState({target:null,isOpen:!1,useTargetPoint:!1,items:void 0,providers:void 0}))},e.ButtonContainerClassName="vss-ContextualMenu--container",e.buttonRef="button",tslib_1.__decorate([autobind],e.prototype,"_onClick",null),tslib_1.__decorate([autobind],e.prototype,"_onDismiss",null),e}(BaseComponent);export{ContextualMenuButton};
+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";
+/**
+ * Component that contains a button which, when activated, will show a contextual menu with the items provided
+*/
+var ContextualMenuButton = /** @class */ (function (_super) {
+    tslib_1.__extends(ContextualMenuButton, _super);
+    function ContextualMenuButton(props) {
+        var _this = _super.call(this, props) || this;
+        _this._warnDeprecations({
+            'targetPoint': 'target',
+            'useTargetPoint': 'target',
+        });
+        return _this;
+    }
+    ContextualMenuButton.prototype.focus = function () {
+        if (this._button && this._button.focus) {
+            this._button.focus();
+        }
+    };
+    ContextualMenuButton.prototype.componentWillReceiveProps = function (nextProps) {
+        if (nextProps.isOpen && !this.state.items) {
+            this.setState({
+                items: this.props.getItems(),
+                providers: this.props.getItemProviders ? this.props.getItemProviders() : []
+            });
+        }
+    };
+    ContextualMenuButton.prototype.componentWillMount = function () {
+        if (this.props.isOpen) {
+            this.state = { isOpen: true, providers: this.props.getItemProviders ? this.props.getItemProviders() : [], items: this.props.getItems() };
+        }
+        else {
+            this.state = { items: undefined, providers: undefined, isOpen: false };
+        }
+        this._contextMenuExpandedId = getId("context-menu-expanded");
+    };
+    ContextualMenuButton.prototype.componentDidMount = function () {
+        _super.prototype.componentDidMount.call(this);
+        this._isMounted = true;
+    };
+    ContextualMenuButton.prototype.componentWillUnmount = function () {
+        this._isMounted = false;
+        _super.prototype.componentWillUnmount.call(this);
+    };
+    ContextualMenuButton.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, className = _a.className, ctaButton = _a.ctaButton, directionalHint = _a.directionalHint, iconProps = _a.iconProps, showTooltip = _a.showTooltip, title = _a.title, allocateSpaceWhileHidden = _a.allocateSpaceWhileHidden;
+        var isOpen = this.state.isOpen || this.props.isOpen || false;
+        var target = this.state.target || this.props.target || this.props.targetPoint;
+        var isTargetAPoint = this.state.useTargetPoint || this.props.useTargetPoint;
+        if (isTargetAPoint === undefined) {
+            // See target is a point
+            isTargetAPoint = target && target.x !== undefined && target.y !== undefined;
+        }
+        var buttonProps = tslib_1.__assign({}, getNativeProps(this.props, buttonProperties), { componentRef: function (button) { return _this._button = button; }, onClick: this._onClick, ariaLabel: title, className: css("vss-ContextualMenuButton", "contextual-menu-button", // back compat
+            className, {
+                "open": isOpen,
+                "space-allocated": allocateSpaceWhileHidden,
+                "space-unallocated": !allocateSpaceWhileHidden
+            }), "aria-haspopup": true, "aria-expanded": isOpen, "aria-controls": isOpen ? this._contextMenuExpandedId : null });
+        var buttonChildren;
+        if (iconProps) {
+            buttonChildren = React.createElement(Icon, tslib_1.__assign({}, VssIcon.getIconProps(iconProps)));
+        }
+        else {
+            buttonChildren = null;
+        }
+        var button;
+        if (ctaButton) {
+            button = React.createElement(PrimaryButton, tslib_1.__assign({}, buttonProps), buttonChildren);
+        }
+        else {
+            button = React.createElement(DefaultButton, tslib_1.__assign({}, buttonProps), buttonChildren);
+        }
+        if (title && showTooltip) {
+            button = React.createElement(TooltipHost, { content: title }, button);
+        }
+        return (React.createElement("div", { className: ContextualMenuButton.ButtonContainerClassName, ref: ContextualMenuButton.buttonRef },
+            button,
+            isOpen &&
+                this.state.items &&
+                React.createElement(VssContextualMenu, { providers: this.state.providers, items: this.state.items, onDismiss: this._onDismiss, shouldFocusOnMount: true, gapSpace: isTargetAPoint ? 5 : 0, directionalHint: directionalHint, target: target || this.refs[ContextualMenuButton.buttonRef] })));
+    };
+    ContextualMenuButton.prototype._onClick = function (event) {
+        var _a = this.props, onClick = _a.onClick, useTargetPoint = _a.useTargetPoint;
+        if (!onClick || !onClick(event)) {
+            event.stopPropagation();
+        }
+        this.setState({
+            items: this.props.getItems(),
+        });
+        if (event.clientX && useTargetPoint) {
+            this.setState({
+                isOpen: true,
+                providers: this.props.getItemProviders ? this.props.getItemProviders() : [],
+                useTargetPoint: true,
+                target: { x: event.clientX, y: event.clientY },
+            });
+        }
+        else {
+            // if this is a keydown event, we don't want to use target point we want to use target element
+            this.setState({
+                isOpen: true,
+                providers: this.props.getItemProviders ? this.props.getItemProviders() : [],
+                useTargetPoint: false,
+            });
+        }
+    };
+    ContextualMenuButton.prototype._onDismiss = function () {
+        if (this._isMounted) {
+            if (this.props.onDismiss) {
+                this.props.onDismiss();
+            }
+            this.setState({ target: null, isOpen: false, useTargetPoint: false, items: undefined, providers: undefined });
+        }
+    };
+    ContextualMenuButton.ButtonContainerClassName = 'vss-ContextualMenu--container';
+    ContextualMenuButton.buttonRef = "button";
+    tslib_1.__decorate([
+        autobind
+    ], ContextualMenuButton.prototype, "_onClick", null);
+    tslib_1.__decorate([
+        autobind
+    ], ContextualMenuButton.prototype, "_onDismiss", null);
+    return ContextualMenuButton;
+}(BaseComponent));
+export { ContextualMenuButton };

Components/ContextualMenuButton/DropdownButton.js

@@ -1,1 +0,18 @@
-import*as tslib_1 from"tslib";import*as React from"react";import{BaseComponent}from"office-ui-fabric-react/lib/Utilities";import{ContextualMenuButton}from"../../Components/ContextualMenuButton/ContextualMenuButton";var DropdownButton=function(t){function o(){return null!==t&&t.apply(this,arguments)||this}return tslib_1.__extends(o,t),o.prototype.render=function(){return React.createElement(ContextualMenuButton,tslib_1.__assign({},this.props,{iconProps:{iconName:"ChevronDown"}}))},o}(BaseComponent);export{DropdownButton};
+import * as tslib_1 from "tslib";
+import * as React from "react";
+import { BaseComponent } from "office-ui-fabric-react/lib/Utilities";
+import { ContextualMenuButton } from '../../Components/ContextualMenuButton/ContextualMenuButton';
+/**
+ * Implementation of the ContextualMenuButton that uses the chevron icon
+*/
+var DropdownButton = /** @class */ (function (_super) {
+    tslib_1.__extends(DropdownButton, _super);
+    function DropdownButton() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    DropdownButton.prototype.render = function () {
+        return (React.createElement(ContextualMenuButton, tslib_1.__assign({}, this.props, { iconProps: { iconName: "ChevronDown" } })));
+    };
+    return DropdownButton;
+}(BaseComponent));
+export { DropdownButton };

Components/ContextualMenuButton/index.d.ts

 export * from './ContextualMenuButton';
-export * from './ContextualMenuButton.Props';
+
 export * from './DropdownButton';
 export * from './MoreActionsButton';

Components/ContextualMenuButton/index.js

@@ -1,1 +0,5 @@
-export*from"./ContextualMenuButton";export*from"./DropdownButton";export*from"./MoreActionsButton";
+export * from './ContextualMenuButton';
+export * from './DropdownButton';
+export * from './MoreActionsButton';
+// @NOTE: Explicit export list due to typescript compiler bug 18644 where a require is generated for export * when const enum's are present
+// export { IContextualMenuButtonProps } from './ContextualMenuButton.Props' 

Components/ContextualMenuButton/MoreActionsButton.js

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

Components/DateTimePicker/DateTimePicker.js

@@ -1,1 +0,70 @@
-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};
+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 = /** @class */ (function (_super) {
+    tslib_1.__extends(DateTimePicker, _super);
+    function DateTimePicker(props) {
+        var _this = _super.call(this, props) || this;
+        _this._value = new Date();
+        if (props) {
+            if ('value' in props) {
+                warn("'value' will be ignored. Use 'defaultValue'.");
+            }
+            if ('onSelectDate' in props) {
+                warn("'onSelectDate' will be ignored.");
+            }
+            _this._value = props.defaultValue;
+        }
+        return _this;
+    }
+    DateTimePicker.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, _b = _a.formatTime, formatTime = _b === void 0 ? this._defaultformatTime : _b, _c = _a.parseTimeFromString, parseTimeFromString = _c === void 0 ? this._defaultParseTimeFromString : _c;
+        return React.createElement("div", { className: "vss-DateTimePicker" },
+            React.createElement("div", { className: "vss-DateTimePicker--dateField" },
+                React.createElement(DatePicker, tslib_1.__assign({ isMonthPickerVisible: false }, this.props, { value: this._value, ariaLabel: Resources.DateTimePicker_DateFieldAriaLabel, onSelectDate: function (date) {
+                        if (_this._value) {
+                            _this._value.setFullYear(date.getFullYear(), date.getMonth(), date.getDate());
+                        }
+                        if (_this.props.onValueChanged) {
+                            _this.props.onValueChanged(_this._value);
+                        }
+                    } }))),
+            React.createElement("div", { className: "vss-DateTimePicker--timeField" },
+                React.createElement(TextField, { defaultValue: formatTime(this._value), onGetErrorMessage: this._getErrorMessage, validateOnFocusOut: true, ariaLabel: Resources.DateTimePicker_TimeFieldAriaLabel, onChanged: function (newValue) {
+                        var parsedTime = parseTimeFromString(newValue);
+                        if (!!parsedTime) {
+                            _this._value.setHours(parsedTime.getHours(), parsedTime.getMinutes(), parsedTime.getSeconds());
+                            if (_this.props.onValueChanged) {
+                                _this.props.onValueChanged(_this._value);
+                            }
+                        }
+                    } })));
+    };
+    DateTimePicker.prototype._getErrorMessage = function (value) {
+        var _a = this.props.parseTimeFromString, parseTimeFromString = _a === void 0 ? this._defaultParseTimeFromString : _a;
+        return !!parseTimeFromString(value) ? '' : Resources.DateTimePicker_CannotParseTime;
+    };
+    DateTimePicker.prototype._defaultParseTimeFromString = function (timeStr) {
+        var date = Date.parse(timeStr);
+        if (date) {
+            return new Date(date);
+        }
+        return null;
+    };
+    DateTimePicker.prototype._defaultformatTime = function (date) {
+        if (date) {
+            return date.toLocaleTimeString();
+        }
+        return '';
+    };
+    tslib_1.__decorate([
+        autobind
+    ], DateTimePicker.prototype, "_getErrorMessage", null);
+    return DateTimePicker;
+}(BaseComponent));
+export { DateTimePicker };

Components/DateTimePicker/DateTimePickerFilterBarItem.js

@@ -1,1 +0,31 @@
-import*as tslib_1 from"tslib";import*as React from"react";import{autobind}from"office-ui-fabric-react/lib/Utilities";import{DateTimePicker}from"../../Components/DateTimePicker/DateTimePicker";import{FilterBarItem}from"../../FilterBar";var DateTimePickerFilterBarItem=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return tslib_1.__extends(e,t),e.prototype.focus=function(){return!1},e.prototype.componentWillMount=function(){this.props.filter.setFilterItemState(this.props.filterItemKey,{value:this.props.defaultValue})},e.prototype.render=function(){return React.createElement(DateTimePicker,{defaultValue:this.props.defaultValue,formatDate:this.props.formatDate,formatTime:this.props.formatTime,parseTimeFromString:this.props.parseTimeFromString,onValueChanged:this._onSelectionChanged})},e.prototype._onSelectionChanged=function(t){this.setFilterValue({value:t})},e.prototype.onFilterChanged=function(t){},tslib_1.__decorate([autobind],e.prototype,"_onSelectionChanged",null),e}(FilterBarItem);export{DateTimePickerFilterBarItem};
+import * as tslib_1 from "tslib";
+import * as React from 'react';
+import { autobind } from 'office-ui-fabric-react/lib/Utilities';
+import { DateTimePicker } from '../../Components/DateTimePicker/DateTimePicker';
+import { FilterBarItem } from '../../FilterBar';
+var DateTimePickerFilterBarItem = /** @class */ (function (_super) {
+    tslib_1.__extends(DateTimePickerFilterBarItem, _super);
+    function DateTimePickerFilterBarItem() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    DateTimePickerFilterBarItem.prototype.focus = function () {
+        //DateTimePicker needs a focus() method for this to work, but Office Fabric DatePicker does not have a focus9) method yet.
+        return false;
+    };
+    DateTimePickerFilterBarItem.prototype.componentWillMount = function () {
+        this.props.filter.setFilterItemState(this.props.filterItemKey, { value: this.props.defaultValue });
+    };
+    DateTimePickerFilterBarItem.prototype.render = function () {
+        return React.createElement(DateTimePicker, { defaultValue: this.props.defaultValue, formatDate: this.props.formatDate, formatTime: this.props.formatTime, parseTimeFromString: this.props.parseTimeFromString, onValueChanged: this._onSelectionChanged });
+    };
+    DateTimePickerFilterBarItem.prototype._onSelectionChanged = function (newDate) {
+        this.setFilterValue({ value: newDate });
+    };
+    DateTimePickerFilterBarItem.prototype.onFilterChanged = function (filterState) {
+    };
+    tslib_1.__decorate([
+        autobind
+    ], DateTimePickerFilterBarItem.prototype, "_onSelectionChanged", null);
+    return DateTimePickerFilterBarItem;
+}(FilterBarItem));
+export { DateTimePickerFilterBarItem };

Components/DateTimePicker/index.d.ts

 export * from './DateTimePicker';
 export * from './DateTimePickerFilterBarItem';
-export * from './DateTimePicker.Props';
+

Components/DateTimePicker/index.js

@@ -1,1 +0,4 @@
-export*from"./DateTimePicker";export*from"./DateTimePickerFilterBarItem";
+export * from './DateTimePicker';
+export * from './DateTimePickerFilterBarItem';
+// @NOTE: Explicit export list due to typescript compiler bug 18644 where a require is generated for export * when const enum's are present
+// export { IDateTimePickerProps, IDateTimePickerStrings, IDateTimePickerFilterBarItemProps } from './DateTimePicker.Props' 

Components/DateTimeRangePicker/DateTimeRangePicker.js

@@ -1,1 +0,39 @@
-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};
+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 = /** @class */ (function (_super) {
+    tslib_1.__extends(DateTimeRangePicker, _super);
+    function DateTimeRangePicker(props) {
+        var _this = _super.call(this, props) || this;
+        if (props) {
+            _this._startTime = props.defaultStartTime;
+            _this._endTime = props.defaultEndTime;
+        }
+        return _this;
+    }
+    DateTimeRangePicker.prototype.render = function () {
+        var _this = 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 (date) {
+                        _this._startTime = date;
+                        if (_this.props.onValueChanged) {
+                            _this.props.onValueChanged(_this._startTime, _this._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 (date) {
+                        _this._endTime = date;
+                        if (_this.props.onValueChanged) {
+                            _this.props.onValueChanged(_this._startTime, _this._endTime);
+                        }
+                    } })));
+    };
+    return DateTimeRangePicker;
+}(BaseComponent));
+export { DateTimeRangePicker };

Components/DateTimeRangePicker/index.d.ts

 export * from './DateTimeRangePicker';
-export * from './DateTimeRangePicker.Props';
+

Components/DateTimeRangePicker/index.js

@@ -1,1 +0,3 @@
-export*from"./DateTimeRangePicker";
+export * from './DateTimeRangePicker';
+// @NOTE: Explicit export list due to typescript compiler bug 18644 where a require is generated for export * when const enum's are present
+// export { IDateTimeRangePickerProps, IDateTimeRangePickerStrings } from './DateTimeRangePicker.Props' 

Components/Dynamic/DynamicLink.js

@@ -1,1 +0,39 @@
-import*as tslib_1 from"tslib";import*as React from"react";import{BaseComponent}from"office-ui-fabric-react/lib/Utilities";import{ObservableComponent}from"../../Components/Dynamic/ObservableComponent";var DynamicLink=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return tslib_1.__extends(e,t),e.prototype.render=function(){var t=tslib_1.__assign({},this.props);return React.createElement(ObservableComponent,tslib_1.__assign({},t,{url:this.props.url}),React.createElement(DynamicLinkInternal,{url:"",children:this.props.children}))},e}(BaseComponent);export{DynamicLink};var DynamicLinkInternal=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return tslib_1.__extends(e,t),e.prototype.render=function(){var t=tslib_1.__assign({},this.props);return this.props.url&&(t.href=this.props.url),delete t.url,this.props.url?React.createElement("a",tslib_1.__assign({},t),this.props.children):React.createElement("span",tslib_1.__assign({},t),this.props.children)},e}(BaseComponent);
+import * as tslib_1 from "tslib";
+import * as React from 'react';
+import { BaseComponent } from 'office-ui-fabric-react/lib/Utilities';
+import { ObservableComponent } from '../../Components/Dynamic/ObservableComponent';
+var DynamicLink = /** @class */ (function (_super) {
+    tslib_1.__extends(DynamicLink, _super);
+    function DynamicLink() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    DynamicLink.prototype.render = function () {
+        var linkProps = tslib_1.__assign({}, this.props);
+        return React.createElement(ObservableComponent, tslib_1.__assign({}, linkProps, { url: this.props.url }),
+            React.createElement(DynamicLinkInternal, { url: '', children: this.props.children }));
+    };
+    return DynamicLink;
+}(BaseComponent));
+export { DynamicLink };
+var DynamicLinkInternal = /** @class */ (function (_super) {
+    tslib_1.__extends(DynamicLinkInternal, _super);
+    function DynamicLinkInternal() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    DynamicLinkInternal.prototype.render = function () {
+        var linkProps = tslib_1.__assign({}, this.props);
+        var childElement = null;
+        if (this.props.url) {
+            linkProps.href = this.props.url;
+        }
+        delete linkProps.url;
+        if (this.props.url) {
+            childElement = React.createElement("a", tslib_1.__assign({}, linkProps), this.props.children);
+        }
+        else {
+            childElement = React.createElement("span", tslib_1.__assign({}, linkProps), this.props.children);
+        }
+        return childElement;
+    };
+    return DynamicLinkInternal;
+}(BaseComponent));

Components/Dynamic/DynamicText.js

@@ -1,1 +0,28 @@
-import*as tslib_1 from"tslib";import*as React from"react";import{BaseComponent,getNativeProps,htmlElementProperties}from"office-ui-fabric-react/lib/Utilities";import{ObservableComponent}from"../../Components/Dynamic/ObservableComponent";var DynamicText=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return tslib_1.__extends(e,t),e.prototype.render=function(){var t=tslib_1.__assign({},this.props);return React.createElement(ObservableComponent,tslib_1.__assign({},t,{text:this.props.text}),React.createElement(DynamicTextInternal,{text:""}))},e}(BaseComponent);export{DynamicText};var DynamicTextInternal=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return tslib_1.__extends(e,t),e.prototype.render=function(){var t=getNativeProps(this.props,htmlElementProperties);return React.createElement("span",tslib_1.__assign({},t),this.props.text)},e}(BaseComponent);
+import * as tslib_1 from "tslib";
+import * as React from 'react';
+import { BaseComponent, getNativeProps, htmlElementProperties } from 'office-ui-fabric-react/lib/Utilities';
+import { ObservableComponent } from '../../Components/Dynamic/ObservableComponent';
+var DynamicText = /** @class */ (function (_super) {
+    tslib_1.__extends(DynamicText, _super);
+    function DynamicText() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    DynamicText.prototype.render = function () {
+        var spanProps = tslib_1.__assign({}, this.props);
+        return React.createElement(ObservableComponent, tslib_1.__assign({}, spanProps, { text: this.props.text }),
+            React.createElement(DynamicTextInternal, { text: '' }));
+    };
+    return DynamicText;
+}(BaseComponent));
+export { DynamicText };
+var DynamicTextInternal = /** @class */ (function (_super) {
+    tslib_1.__extends(DynamicTextInternal, _super);
+    function DynamicTextInternal() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    DynamicTextInternal.prototype.render = function () {
+        var spanProps = getNativeProps(this.props, htmlElementProperties);
+        return React.createElement("span", tslib_1.__assign({}, spanProps), this.props.text);
+    };
+    return DynamicTextInternal;
+}(BaseComponent));

Components/Dynamic/index.d.ts

 export * from './ObservableComponent';
-export * from './ObservableComponent.Props';
+
 export * from './DynamicLink';
-export * from './DynamicLink.Props';
+
 export * from './DynamicText';
-export * from './DynamicText.Props';
+

Components/Dynamic/index.js

@@ -1,1 +0,7 @@
-export*from"./ObservableComponent";export*from"./DynamicLink";export*from"./DynamicText";
+export * from './ObservableComponent';
+export * from './DynamicLink';
+export * from './DynamicText';
+// @NOTE: Explicit export list due to typescript compiler bug 18644 where a require is generated for export * when const enum's are present
+// export { IDynamicLinkProps } from './DynamicLink.Props';
+// export { IDynamicTextProps } from './DynamicText.Props';
+// export { IObservableComponentProps } from './ObservableComponent.Props'; 

Components/Dynamic/ObservableComponent.js

@@ -1,1 +0,117 @@
-import*as tslib_1 from"tslib";import*as React from"react";import{BaseComponent}from"office-ui-fabric-react/lib/Utilities";import{ObservableLike}from"../../Utilities/Observable";var ObservableComponent=function(e){function t(t){var r=e.call(this,t)||this;r._observableSubscriptionDelegates={};var i={};for(var s in r.props)i[s]=ObservableLike.getValue(r.props[s]);return r.state=i,r}return tslib_1.__extends(t,e),t.prototype.componentWillMount=function(){for(var e in this.props)this._subscribe(e,this.props)},t.prototype.componentWillUnmount=function(){for(var e in this.props)this._unsubscribe(e,this.props)},t.prototype.componentWillReceiveProps=function(e){var t=this.props,r=tslib_1.__assign({},this.state),i=!1;for(var s in t){(o=t[s])!==(n=e[s])&&(this._unsubscribe(s,this.props),this._subscribe(s,e),r[s]=ObservableLike.getValue(n),i=!0)}for(var s in e){var o=t[s];if(void 0===o){var n=e[s];this._subscribe(s,e),r[s]=ObservableLike.getValue(n),i=!0}}i&&this.setState(r)},t.prototype.render=function(){var e=this;if(this.props.children&&React.Children.count(this.props.children)<=1){var t=React.Children.map(this.props.children,function(t){if(null===t)return null;var r=t,i={};for(var s in e.state)"children"!==s&&(i[s]=e.state[s]);i.children=r.props.children;return React.cloneElement(r,i)});return 0===t.length?null:t[0]}throw new Error("More than one child component cannot be passed to ObservableComponent")},t.prototype._subscribe=function(e,t){var r=t[e];if(ObservableLike.isObservable(r)){var i=this._onValueChanged.bind(this,e);ObservableLike.subscribe(r,i),this._observableSubscriptionDelegates[e]=i}},t.prototype._unsubscribe=function(e,t){var r=this.props[e];if(ObservableLike.isObservable(r)){var i=this._observableSubscriptionDelegates[e];ObservableLike.unsubscribe(r,i),delete this._observableSubscriptionDelegates[e]}},t.prototype._onValueChanged=function(e,t,r){this.setState((i={},i[e]=t,i));var i},t}(BaseComponent);export{ObservableComponent};
+import * as tslib_1 from "tslib";
+import * as React from 'react';
+import { BaseComponent } from 'office-ui-fabric-react/lib/Utilities';
+import { ObservableLike } from '../../Utilities/Observable';
+/**
+ * Handles subscription to properties that are IObservableValues, so that components don't have to handle on their own.
+ *
+ * Usage:
+ *
+ * <ObservableComponent myObservableValue={observableValue} className='foo'>
+ *   <MyComponent myObservableValue='' />
+ * </ObservableComponent>
+ *
+ * Your component will get re-rendered with the new value of myObservableValue whenever that value changes.
+ * Additionally, any additional props set on ObservableComponent will also get passed down.
+ */
+var ObservableComponent = /** @class */ (function (_super) {
+    tslib_1.__extends(ObservableComponent, _super);
+    function ObservableComponent(props) {
+        var _this = _super.call(this, props) || this;
+        _this._observableSubscriptionDelegates = {};
+        var state = {};
+        for (var propName in _this.props) {
+            state[propName] = ObservableLike.getValue(_this.props[propName]);
+        }
+        _this.state = state;
+        return _this;
+    }
+    ObservableComponent.prototype.componentWillMount = function () {
+        for (var propName in this.props) {
+            this._subscribe(propName, this.props);
+        }
+    };
+    ObservableComponent.prototype.componentWillUnmount = function () {
+        for (var propName in this.props) {
+            this._unsubscribe(propName, this.props);
+        }
+    };
+    ObservableComponent.prototype.componentWillReceiveProps = function (nextProps) {
+        var oldProps = this.props;
+        var newState = tslib_1.__assign({}, this.state);
+        var stateChanged = false;
+        for (var propName in oldProps) {
+            var oldValue = oldProps[propName];
+            var newValue = nextProps[propName];
+            if (oldValue !== newValue) {
+                this._unsubscribe(propName, this.props);
+                this._subscribe(propName, nextProps);
+                newState[propName] = ObservableLike.getValue(newValue);
+                stateChanged = true;
+            }
+        }
+        for (var propName in nextProps) {
+            var oldValue = oldProps[propName];
+            if (oldValue === undefined) {
+                var newValue = nextProps[propName];
+                this._subscribe(propName, nextProps);
+                newState[propName] = ObservableLike.getValue(newValue);
+                stateChanged = true;
+            }
+        }
+        if (stateChanged) {
+            this.setState(newState);
+        }
+    };
+    ObservableComponent.prototype.render = function () {
+        var _this = this;
+        if (this.props.children && React.Children.count(this.props.children) <= 1) {
+            var childrenWithProps = React.Children.map(this.props.children, function (child) {
+                if (child === null) {
+                    return null;
+                }
+                var childElement = child;
+                var newProps = {};
+                for (var key in _this.state) {
+                    if (key !== 'children') {
+                        newProps[key] = _this.state[key];
+                    }
+                }
+                newProps['children'] = childElement.props.children;
+                var childWithProps = React.cloneElement(childElement, newProps);
+                return childWithProps;
+            });
+            if (childrenWithProps.length === 0) {
+                return null;
+            }
+            return childrenWithProps[0];
+        }
+        else {
+            throw new Error("More than one child component cannot be passed to ObservableComponent");
+        }
+    };
+    ObservableComponent.prototype._subscribe = function (propName, props) {
+        var observableValue = props[propName];
+        if (ObservableLike.isObservable(observableValue)) {
+            var delegate = this._onValueChanged.bind(this, propName);
+            ObservableLike.subscribe(observableValue, delegate);
+            this._observableSubscriptionDelegates[propName] = delegate;
+        }
+    };
+    ObservableComponent.prototype._unsubscribe = function (propName, props) {
+        var observableValue = this.props[propName];
+        if (ObservableLike.isObservable(observableValue)) {
+            var delegate = this._observableSubscriptionDelegates[propName];
+            ObservableLike.unsubscribe(observableValue, delegate);
+            delete this._observableSubscriptionDelegates[propName];
+        }
+    };
+    ObservableComponent.prototype._onValueChanged = function (propName, value, action) {
+        this.setState((_a = {},
+            _a[propName] = value,
+            _a));
+        var _a;
+    };
+    return ObservableComponent;
+}(BaseComponent));
+export { ObservableComponent };

Components/FileInput/FileInput.js

@@ -1,1 +0,477 @@
-function tryDetectFileEncoding(e){if(void 0===window.atob)return 0;for(var t=window.atob(e),r=[],s=0;s<4;s++)r.push(t.charCodeAt(s));if(254===r[0]&&255===r[1])return 6;if(255===r[0]&&254===r[1])return 0===r[2]&&0===r[3]?5:7;if(239===r[0]&&187===r[1]&&191===r[2])return 3;if(0===r[0]&&0===r[1]&&254===r[2]&&255===r[3])return 4;for(var i=!0,s=0,o=t.length;s<o;s++){var n=t.charCodeAt(s);if((n<=31||127==n)&&9!=n&&12!=n&&13!=n&&10!=n&&26!=n)return 1;n>127&&(i=!1)}return i?2:3}import*as tslib_1 from"tslib";import*as React from"react";import{autobind,BaseComponent,css,format}from"office-ui-fabric-react/lib/Utilities";import*as VSSUIResources from"../../Resources/VSS.Resources.VSSUI";import"./FileInput.css";var FileInput=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t._files=[],t}return tslib_1.__extends(t,e),t.prototype.render=function(){var e=this.props.maximumNumberOfFiles||0,t=this._files,r=this.state&&this.state.errorMessage?this.state.errorMessage:"",s=!e||t.length<e,i=null;if(this.props.allowedFileExtensions){i=this.props.allowedFileExtensions.map(function(e){return"."!==e[0]?"."+e:e}).join()}var o=1===e?VSSUIResources.FileInputDragDropSingleFileLabel:VSSUIResources.FileInputDragDropLabel,n=1!==e;return React.createElement(FileInputPure,{dragDropLabel:o,multiple:n,canAddMoreFiles:s,accept:i,files:t,errorMessage:r,addFiles:this._addFiles,remove:this._remove,clear:this._clear})},t.prototype._clear=function(){this._files.forEach(function(e){e.fileReader.readyState!==FileReader.DONE&&e.fileReader.abort()}),this._files=[],this.setState({files:this._files,errorMessage:""}),this._triggerUpdateEvent()},t.prototype._remove=function(e){this._files=this._files.filter(function(t){return t!==e}),this.setState({files:this._files}),this._triggerUpdateEvent()},t.prototype._addFiles=function(e){if(this.props.allowedFileExtensions&&this.props.allowedFileExtensions.length>0)for(o=0;o<e.length;o++){for(var t=e[o].name.split(".").pop(),r=!1,s=0;s<this.props.allowedFileExtensions.length;s++)if(t.toLocaleLowerCase()===this.props.allowedFileExtensions[s].toLocaleLowerCase()){r=!0;break}if(!r){c=format(VSSUIResources.FileInputErrorNotAllowedExtensionType,t,this.props.allowedFileExtensions.join());return void this.setState({errorMessage:c})}}for(var i={},o=0,n=this._files.length;o<n;o++)i[this.props.fileNamesCaseSensitive?this._files[o].result.name:this._files[o].result.name.toLowerCase()]=1;for(var a=this._getTotalFilesSize(),o=0,n=e.length;o<n;o++){if(this.props.maximumSingleFileSize&&e[o].size>this.props.maximumSingleFileSize){c=this._getLimitErrorMessage(format(VSSUIResources.FileInputErrorMaxFileSize,e[o].name,this._getFriendlySizeString(e[o].size),this._getFriendlySizeString(this.props.maximumSingleFileSize)),{fileSize:e[o].size});return void this.setState({errorMessage:c})}a+=e[o].size;var l=this.props.fileNamesCaseSensitive?e[o].name:e[o].name.toLowerCase();if(i[l]){c=format(VSSUIResources.FileInputErrorDuplicateFileName,e[o].name);return void this.setState({errorMessage:c})}i[l]=1}if(this.props.maximumTotalFileSize&&a>this.props.maximumTotalFileSize){c=this._getLimitErrorMessage(format(VSSUIResources.FileInputErrorTotalFileSize,this._getFriendlySizeString(a),this._getFriendlySizeString(this.props.maximumTotalFileSize)),{totalSize:a});this.setState({errorMessage:c})}else{var p=this._files.length+e.length;if(this.props.maximumNumberOfFiles&&p>this.props.maximumNumberOfFiles){var u=1===this.props.maximumNumberOfFiles?VSSUIResources.FileInputErrorSingleFileOnly:format(VSSUIResources.FileInputErrorMaxNumFiles,this.props.maximumNumberOfFiles),c=this._getLimitErrorMessage(u,{fileCount:p});this.setState({errorMessage:c})}else for(var o=0,n=e.length;o<n;o++)this._addFile(e[o])}},t.prototype._addFile=function(e){var t=this,r={name:e.name,size:e.size,type:e.type,lastModifiedDate:e.lastModifiedDate,statusText:VSSUIResources.Loading,isError:!1},s=new FileReader,i={result:r,fileReader:s};this._files.push(i);var o=function(){t.setState({files:t._files,errorMessage:t.state&&t.state.errorMessage?t.state.errorMessage:""}),t._triggerUpdateEvent()},n=function(){r.statusText=t._getFriendlySizeString(e.size),o()};s.onload=function(e){if(r.encoding=0,1===t.props.resultContentType)r.content=s.result||"";else{var i=s.result;i&&i.indexOf(",")>-1?(r.content=i.substr(i.indexOf(",")+1),"//"===r.content.substr(0,2)&&r.content.length%4==2&&(r.content=r.content.substr(2))):r.content="",t.props.detectEncoding&&(r.encoding=tryDetectFileEncoding(r.content))}n()},s.onerror=function(e){format(VSSUIResources.FileInputReadErrorFormat,r.name,e.message);r.statusText=VSSUIResources.FileInputErrorLabel,r.isError=!0,o()},s.onloadend=function(e){o()},1===this.props.resultContentType?s.readAsText(e):2===this.props.resultContentType?(r.encoding=0,r.file=e,n(),o()):s.readAsDataURL(e)},t.prototype._triggerUpdateEvent=function(){this.props.updateHandler&&this.props.updateHandler({loading:this._files.some(function(e){return e.fileReader.readyState!==FileReader.DONE}),files:this._files})},t.prototype._getTotalFilesSize=function(){for(var e=0,t=this._files,r=0,s=t.length;r<s;r++)e+=t[r].result.size;return e},t.prototype._getLimitErrorMessage=function(e,t){var r=e;return this.props.limitMessageFormatter&&(r=this.props.limitMessageFormatter(e,t)),r},t.prototype._getFriendlySizeString=function(e,t){void 0===t&&(t=1);Math.pow(10,t);return e<1024?format(VSSUIResources.FileSizeBytesFormat,e):e<1048576?format(VSSUIResources.FileSizeKBFormat,Math.round(e/1024*10)/10):format(VSSUIResources.FileSizeMBFormat,Math.round(e/1048576*10)/10)},tslib_1.__decorate([autobind],t.prototype,"_clear",null),tslib_1.__decorate([autobind],t.prototype,"_remove",null),tslib_1.__decorate([autobind],t.prototype,"_addFiles",null),t}(BaseComponent);export{FileInput};var FileInputPure=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return tslib_1.__extends(t,e),t.prototype.render=function(){var e=this,t=css("vss-FileInput-filesDropTarget",this.state.isDragging?this.props.dragOverCssClass||"vss-FileInput-dragOver":"");return React.createElement("div",{className:"vss-FileInput"},this.props.canAddMoreFiles&&React.createElement("div",{className:t,onDragOver:this._onDragOver,onDragLeave:this._onDragLeave,onDragEnter:this._onDragEnter,onDrop:this._onDrop},React.createElement("div",{className:"vss-FileInput-dragDropTable",role:"presentation"},React.createElement("div",{className:"vss-FileInput-dragDropLabel"},React.createElement("span",null,this.props.dragDropLabel)),React.createElement("div",{className:"vss-FileInput-browseButton"},React.createElement("button",{className:"vss-FileInput-browseContainer",onKeyPress:this._onBrowseContainerKeyPress,onClick:this._onBrowseContainerClick},VSSUIResources.FileInputBrowseButtonLabel),React.createElement("input",{type:"file",ref:this._resolveFileInput,onChange:this._onFileInputChange,accept:this.props.accept,multiple:this.props.multiple,style:{display:"none"}})))),this.props.files.length>1&&React.createElement("div",{className:"vss-FileInput-overallStatusContainer"},React.createElement("span",{className:"vss-FileInput-overallStatusActions"},React.createElement("a",{onClick:this._onClearClick},VSSUIResources.FileInputRemoveAll))),React.createElement("div",{className:"vss-FileInput-errorContainer"},this.props.errorMessage),this.props.files.length>0&&React.createElement("ul",{className:"vss-FileInput-fileList",style:{display:"block"}},this.props.files.map(function(t){return React.createElement("li",{key:t.result.name},React.createElement("div",{className:"vss-FileInput-headerContainer"},React.createElement("span",{className:"vss-FileInput-fileName"},t.result.name)),React.createElement("div",{className:"vss-FileInput-detailsContainer"},React.createElement("span",{className:"vss-FileInput-status"},t.result.statusText),React.createElement("span",{className:"vss-FileInput-links"},React.createElement("a",{onClick:function(){return e._onRemoveClick(t)},role:"button"},VSSUIResources.FileInputRemoveFile))))})))},t.prototype.componentWillMount=function(){this.setState({isDragging:!1})},t.prototype._onClearClick=function(){this.props.clear&&this.props.clear()},t.prototype._onRemoveClick=function(e){this.props.remove&&this.props.remove(e)},t.prototype._onBrowseContainerClick=function(){this._fileInput&&this._fileInput.click()},t.prototype._onBrowseContainerKeyPress=function(e){!this._fileInput||13!==e.which&&32!==e.which||this._fileInput.click()},t.prototype._resolveFileInput=function(e){this._fileInput=e},t.prototype._onDragEnter=function(e){this._setDropEffect(e),e.preventDefault(),this.setState({isDragging:!0})},t.prototype._onDragLeave=function(e){e.preventDefault(),this.setState({isDragging:!1})},t.prototype._onDragOver=function(e){this._setDropEffect(e),e.preventDefault(),this.setState({isDragging:!0})},t.prototype._onDrop=function(e){this._setDropEffect(e),e.preventDefault(),this.setState({isDragging:!1});var t=e.dataTransfer.files;t&&t.length>0&&this.props.addFiles&&this.props.addFiles(t)},t.prototype._onFileInputChange=function(e){e.currentTarget.files&&e.currentTarget.files.length&&(this.props.addFiles&&this.props.addFiles(e.currentTarget.files),e.currentTarget.value="")},t.prototype._setDropEffect=function(e){try{e.dataTransfer.dropEffect="copy"}catch(e){}},tslib_1.__decorate([autobind],t.prototype,"_onClearClick",null),tslib_1.__decorate([autobind],t.prototype,"_onRemoveClick",null),tslib_1.__decorate([autobind],t.prototype,"_onBrowseContainerClick",null),tslib_1.__decorate([autobind],t.prototype,"_onBrowseContainerKeyPress",null),tslib_1.__decorate([autobind],t.prototype,"_resolveFileInput",null),tslib_1.__decorate([autobind],t.prototype,"_onDragEnter",null),tslib_1.__decorate([autobind],t.prototype,"_onDragLeave",null),tslib_1.__decorate([autobind],t.prototype,"_onDragOver",null),tslib_1.__decorate([autobind],t.prototype,"_onDrop",null),tslib_1.__decorate([autobind],t.prototype,"_onFileInputChange",null),t}(BaseComponent);
+import * as tslib_1 from "tslib";
+import * as React from "react";
+import { autobind, BaseComponent, css, format } from "office-ui-fabric-react/lib/Utilities";
+import * as VSSUIResources from '../../Resources/VSS.Resources.VSSUI';
+import "./FileInput.css";
+/*
+ * Make a best-effort attempt to determine the file encoding for the given base64 encoded file contents
+ *
+ * @param base64Content Base64 encoded string of the file contents
+ */
+function tryDetectFileEncoding(base64Content) {
+    if (typeof window.atob === "undefined") {
+        return 0 /* Unknown */;
+    }
+    var decodedContent = window.atob(base64Content);
+    // Read the byte order mark
+    var bom = [];
+    for (var i = 0; i < 4; i++) {
+        bom.push(decodedContent.charCodeAt(i));
+    }
+    if (bom[0] === 0xfe && bom[1] === 0xff) {
+        return 6 /* UTF16_BE */;
+    }
+    else if (bom[0] === 0xff && bom[1] === 0xfe) {
+        if (bom[2] === 0x00 && bom[3] === 0x00) {
+            return 5 /* UTF32_LE */;
+        }
+        else {
+            return 7 /* UTF16_LE */;
+        }
+    }
+    else if (bom[0] === 0xef && bom[1] === 0xbb && bom[2] === 0xbf) {
+        return 3 /* UTF8 */;
+    }
+    else if (bom[0] === 0x00 && bom[1] === 0x00 && bom[2] === 0xfe && bom[3] === 0xff) {
+        return 4 /* UTF32_BE */;
+    }
+    var isAscii = true;
+    // Check for binary files
+    for (var i = 0, l = decodedContent.length; i < l; i++) {
+        var charCode = decodedContent.charCodeAt(i);
+        // If buffer[i] is 0-0x1F OR 0x7F but not (TAB, CR, LF, FF, or ^Z)
+        // then the file is a binary file.
+        if ((charCode <= 0x1f || charCode == 0x7f) &&
+            (charCode != 0x9 && charCode != 0xc && charCode != 0xd && charCode != 0xa && charCode != 0x1a)) {
+            return 1 /* Binary */;
+        }
+        else if (charCode > 0x7f) {
+            isAscii = false;
+        }
+    }
+    if (isAscii) {
+        return 2 /* ASCII */;
+    }
+    // Treat non-binary files without an explicit BOM as UTF8
+    return 3 /* UTF8 */;
+}
+var FileInput = /** @class */ (function (_super) {
+    tslib_1.__extends(FileInput, _super);
+    function FileInput() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this._files = [];
+        return _this;
+    }
+    FileInput.prototype.render = function () {
+        var maximumNumberOfFiles = this.props.maximumNumberOfFiles || 0;
+        var files = this._files;
+        var errorMessage = (this.state && this.state.errorMessage) ? this.state.errorMessage : "";
+        var canAddMoreFiles = !maximumNumberOfFiles || (files.length < maximumNumberOfFiles);
+        var accept = null;
+        if (this.props.allowedFileExtensions) {
+            var fileExtensions = this.props.allowedFileExtensions.map(function (extension) {
+                if (extension[0] !== ".") {
+                    return "." + extension;
+                }
+                else {
+                    return extension;
+                }
+            });
+            accept = fileExtensions.join();
+        }
+        var dragDropLabel = maximumNumberOfFiles === 1 ? VSSUIResources.FileInputDragDropSingleFileLabel : VSSUIResources.FileInputDragDropLabel;
+        var multiple = maximumNumberOfFiles !== 1;
+        return React.createElement(FileInputPure, { dragDropLabel: dragDropLabel, multiple: multiple, canAddMoreFiles: canAddMoreFiles, accept: accept, files: files, errorMessage: errorMessage, addFiles: this._addFiles, remove: this._remove, clear: this._clear });
+    };
+    FileInput.prototype._clear = function () {
+        this._files.forEach(function (pendingResult) {
+            if (pendingResult.fileReader.readyState !== FileReader.DONE) {
+                pendingResult.fileReader.abort();
+            }
+        });
+        this._files = [];
+        this.setState({
+            files: this._files,
+            errorMessage: ""
+        });
+        this._triggerUpdateEvent();
+    };
+    FileInput.prototype._remove = function (file) {
+        this._files = this._files.filter(function (r) { return r !== file; });
+        this.setState({
+            files: this._files
+        });
+        this._triggerUpdateEvent();
+    };
+    FileInput.prototype._addFiles = function (files) {
+        // Make sure the file type selected is of the allowed file extenstion type
+        if (this.props.allowedFileExtensions && this.props.allowedFileExtensions.length > 0) {
+            for (var i = 0; i < files.length; i++) {
+                var fileExtension = files[i].name.split('.').pop();
+                var isAllowed = false;
+                for (var j = 0; j < this.props.allowedFileExtensions.length; j++) {
+                    if (fileExtension.toLocaleLowerCase() === this.props.allowedFileExtensions[j].toLocaleLowerCase()) {
+                        isAllowed = true;
+                        break;
+                    }
+                }
+                if (!isAllowed) {
+                    var errorMessage = format(VSSUIResources.FileInputErrorNotAllowedExtensionType, fileExtension, this.props.allowedFileExtensions.join());
+                    this.setState({
+                        errorMessage: errorMessage
+                    });
+                    return;
+                }
+            }
+        }
+        // Make sure the file names are unique, so build a hash set of names
+        var fileNames = {};
+        for (var i = 0, l = this._files.length; i < l; i++) {
+            fileNames[this.props.fileNamesCaseSensitive ? this._files[i].result.name : this._files[i].result.name.toLowerCase()] = 1;
+        }
+        // Loop through each file checking size and name uniqueness
+        var totalSize = this._getTotalFilesSize();
+        for (var i = 0, l = files.length; i < l; i++) {
+            if (this.props.maximumSingleFileSize && files[i].size > this.props.maximumSingleFileSize) {
+                var errorMessage = this._getLimitErrorMessage(format(VSSUIResources.FileInputErrorMaxFileSize, files[i].name, this._getFriendlySizeString(files[i].size), this._getFriendlySizeString(this.props.maximumSingleFileSize)), { fileSize: files[i].size });
+                this.setState({
+                    errorMessage: errorMessage
+                });
+                return;
+            }
+            totalSize += files[i].size;
+            var fileNameKey = this.props.fileNamesCaseSensitive ? files[i].name : files[i].name.toLowerCase();
+            if (fileNames[fileNameKey]) {
+                var errorMessage = format(VSSUIResources.FileInputErrorDuplicateFileName, files[i].name);
+                this.setState({
+                    errorMessage: errorMessage
+                });
+                return;
+            }
+            fileNames[fileNameKey] = 1;
+        }
+        // Check overall file size
+        if (this.props.maximumTotalFileSize && totalSize > this.props.maximumTotalFileSize) {
+            var errorMessage = this._getLimitErrorMessage(format(VSSUIResources.FileInputErrorTotalFileSize, this._getFriendlySizeString(totalSize), this._getFriendlySizeString(this.props.maximumTotalFileSize)), { totalSize: totalSize });
+            this.setState({
+                errorMessage: errorMessage
+            });
+            return;
+        }
+        // Check total number of files
+        var fileCount = (this._files.length + files.length);
+        if (this.props.maximumNumberOfFiles && fileCount > this.props.maximumNumberOfFiles) {
+            var message = this.props.maximumNumberOfFiles === 1 ?
+                VSSUIResources.FileInputErrorSingleFileOnly :
+                format(VSSUIResources.FileInputErrorMaxNumFiles, this.props.maximumNumberOfFiles);
+            var errorMessage = this._getLimitErrorMessage(message, { fileCount: fileCount });
+            this.setState({
+                errorMessage: errorMessage
+            });
+            return;
+        }
+        //
+        // Add the files (error checks have passed)
+        //
+        for (var i = 0, l = files.length; i < l; i++) {
+            this._addFile(files[i]);
+        }
+    };
+    FileInput.prototype._addFile = function (file) {
+        var _this = this;
+        //
+        // Setup the pending result
+        //
+        var result = {
+            name: file.name,
+            size: file.size,
+            type: file.type,
+            lastModifiedDate: file.lastModifiedDate,
+            statusText: VSSUIResources.Loading,
+            isError: false
+        };
+        var fileReader = new FileReader();
+        var fileInputData = {
+            result: result,
+            fileReader: fileReader
+        };
+        this._files.push(fileInputData);
+        // Helper functions
+        var _triggerUpdate = function () {
+            _this.setState({
+                files: _this._files,
+                errorMessage: (_this.state && _this.state.errorMessage) ? _this.state.errorMessage : ""
+            });
+            _this._triggerUpdateEvent();
+        };
+        var _addResult = function () {
+            result.statusText = _this._getFriendlySizeString(file.size);
+            _triggerUpdate();
+        };
+        //
+        // Setup the read operation
+        //
+        fileReader.onload = function (e) {
+            result.encoding = 0 /* Unknown */;
+            if (_this.props.resultContentType === 1 /* RawText */) {
+                result.content = fileReader.result || "";
+            }
+            else {
+                var dataUrl = fileReader.result;
+                // If the file is empty, Chrome returns result="data:" and IE returns result=null, so we check for both of these cases.
+                if (dataUrl && dataUrl.indexOf(",") > -1) {
+                    // Get the base64 content portion of the data url
+                    result.content = dataUrl.substr(dataUrl.indexOf(",") + 1);
+                    if (result.content.substr(0, 2) === "//" && result.content.length % 4 === 2) {
+                        // Trim a leading "//" only if it isn't part of the base64 content itself (base64 length is a multiple of 4).
+                        result.content = result.content.substr(2);
+                    }
+                }
+                else {
+                    result.content = "";
+                }
+                if (_this.props.detectEncoding) {
+                    result.encoding = tryDetectFileEncoding(result.content);
+                }
+            }
+            _addResult();
+        };
+        fileReader.onerror = function (e) {
+            var errorMessage = format(VSSUIResources.FileInputReadErrorFormat, result.name, e.message);
+            result.statusText = VSSUIResources.FileInputErrorLabel;
+            result.isError = true;
+            _triggerUpdate();
+        };
+        fileReader.onloadend = function (e) {
+            _triggerUpdate();
+        };
+        //
+        // Start the read operation
+        //
+        if (this.props.resultContentType === 1 /* RawText */) {
+            fileReader.readAsText(file);
+        }
+        else if (this.props.resultContentType === 2 /* RawFile */) {
+            result.encoding = 0 /* Unknown */;
+            result.file = file;
+            _addResult();
+            _triggerUpdate();
+        }
+        else {
+            fileReader.readAsDataURL(file);
+        }
+    };
+    FileInput.prototype._triggerUpdateEvent = function () {
+        if (this.props.updateHandler) {
+            this.props.updateHandler({
+                loading: this._files.some(function (file) {
+                    return file.fileReader.readyState !== FileReader.DONE;
+                }),
+                files: this._files
+            });
+        }
+    };
+    FileInput.prototype._getTotalFilesSize = function () {
+        var totalSize = 0;
+        var files = this._files;
+        for (var i = 0, l = files.length; i < l; i++) {
+            totalSize += files[i].result.size;
+        }
+        return totalSize;
+    };
+    FileInput.prototype._getLimitErrorMessage = function (errorText, limitData) {
+        var message = errorText;
+        if (this.props.limitMessageFormatter) {
+            message = this.props.limitMessageFormatter(errorText, limitData);
+        }
+        return message;
+    };
+    /**
+     * Get a friendly string representing the length of a file (e.g. "61.2 KB")
+     *
+     * @param numBytes Number of bytes
+     * @param decimalPlaces Number of decimal places to round to. (e.g. 0 -> "61 KB", 1 -> "61.2 KB", 2 -> "61.18 KB")
+     */
+    FileInput.prototype._getFriendlySizeString = function (numBytes, decimalPlaces) {
+        if (decimalPlaces === void 0) { decimalPlaces = 1; }
+        var divider = Math.pow(10, decimalPlaces);
+        if (numBytes < 1024) {
+            return format(VSSUIResources.FileSizeBytesFormat, numBytes);
+        }
+        else if (numBytes < (1024 * 1024)) {
+            return format(VSSUIResources.FileSizeKBFormat, Math.round(numBytes / 1024 * 10) / 10);
+        }
+        else {
+            return format(VSSUIResources.FileSizeMBFormat, Math.round(numBytes / (1024 * 1024) * 10) / 10);
+        }
+    };
+    tslib_1.__decorate([
+        autobind
+    ], FileInput.prototype, "_clear", null);
+    tslib_1.__decorate([
+        autobind
+    ], FileInput.prototype, "_remove", null);
+    tslib_1.__decorate([
+        autobind
+    ], FileInput.prototype, "_addFiles", null);
+    return FileInput;
+}(BaseComponent));
+export { FileInput };
+var FileInputPure = /** @class */ (function (_super) {
+    tslib_1.__extends(FileInputPure, _super);
+    function FileInputPure() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    FileInputPure.prototype.render = function () {
+        var _this = this;
+        // the file input is not shown. instead, we show a pretty drag-drop container with a browse button.
+        var fileInputStyle = {
+            display: "none"
+        };
+        var fileListStyle = {
+            display: "block"
+        };
+        var dropTargetClassName = 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: dropTargetClassName, onDragOver: this._onDragOver, onDragLeave: this._onDragLeave, onDragEnter: this._onDragEnter, onDrop: this._onDrop },
+                    React.createElement("div", { className: "vss-FileInput-dragDropTable", role: "presentation" },
+                        React.createElement("div", { className: "vss-FileInput-dragDropLabel" },
+                            React.createElement("span", null, this.props.dragDropLabel)),
+                        React.createElement("div", { className: "vss-FileInput-browseButton" },
+                            React.createElement("button", { className: "vss-FileInput-browseContainer", onKeyPress: this._onBrowseContainerKeyPress, onClick: this._onBrowseContainerClick }, VSSUIResources.FileInputBrowseButtonLabel),
+                            React.createElement("input", { type: "file", ref: this._resolveFileInput, onChange: this._onFileInputChange, accept: this.props.accept, multiple: this.props.multiple, style: fileInputStyle })))),
+            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: fileListStyle }, this.props.files.map(function (file) {
+                    return React.createElement("li", { key: file.result.name },
+                        React.createElement("div", { className: "vss-FileInput-headerContainer" },
+                            React.createElement("span", { className: "vss-FileInput-fileName" }, file.result.name)),
+                        React.createElement("div", { className: "vss-FileInput-detailsContainer" },
+                            React.createElement("span", { className: "vss-FileInput-status" }, file.result.statusText),
+                            React.createElement("span", { className: "vss-FileInput-links" },
+                                React.createElement("a", { onClick: function () { return _this._onRemoveClick(file); }, role: "button" }, VSSUIResources.FileInputRemoveFile))));
+                })));
+    };
+    FileInputPure.prototype.componentWillMount = function () {
+        this.setState({
+            isDragging: false
+        });
+    };
+    FileInputPure.prototype._onClearClick = function () {
+        if (this.props.clear) {
+            this.props.clear();
+        }
+    };
+    FileInputPure.prototype._onRemoveClick = function (file) {
+        if (this.props.remove) {
+            this.props.remove(file);
+        }
+    };
+    FileInputPure.prototype._onBrowseContainerClick = function () {
+        if (this._fileInput) {
+            this._fileInput.click();
+        }
+    };
+    FileInputPure.prototype._onBrowseContainerKeyPress = function (e) {
+        if (this._fileInput && (e.which === 13 /* enter */ || e.which === 32 /* space */)) {
+            this._fileInput.click();
+        }
+    };
+    FileInputPure.prototype._resolveFileInput = function (element) {
+        this._fileInput = element;
+    };
+    FileInputPure.prototype._onDragEnter = function (e) {
+        this._setDropEffect(e);
+        e.preventDefault();
+        this.setState({
+            isDragging: true
+        });
+    };
+    FileInputPure.prototype._onDragLeave = function (e) {
+        e.preventDefault();
+        this.setState({
+            isDragging: false
+        });
+    };
+    FileInputPure.prototype._onDragOver = function (e) {
+        this._setDropEffect(e);
+        e.preventDefault();
+        this.setState({
+            isDragging: true
+        });
+    };
+    FileInputPure.prototype._onDrop = function (e) {
+        this._setDropEffect(e);
+        e.preventDefault();
+        this.setState({
+            isDragging: false
+        });
+        var fileList = e.dataTransfer.files;
+        if (fileList && fileList.length > 0) {
+            if (this.props.addFiles) {
+                this.props.addFiles(fileList);
+            }
+        }
+    };
+    FileInputPure.prototype._onFileInputChange = function (args) {
+        if (args.currentTarget.files && args.currentTarget.files.length) {
+            if (this.props.addFiles) {
+                this.props.addFiles(args.currentTarget.files);
+            }
+            args.currentTarget.value = "";
+        }
+    };
+    FileInputPure.prototype._setDropEffect = function (e) {
+        /*
+         * React wraps event handlers inside other events in the development build to get better devtool integration.
+         * Problem is that Edge and IE don't allow access to the dropEffect property unless you're inside that original event handler.
+         * In the production build there are no wrapper events, it's just a function call, so dropEffect can be accessed normally.
+         *
+         * See https://github.com/facebook/react/issues/5700
+         */
+        try {
+            e.dataTransfer.dropEffect = "copy";
+        }
+        catch (ex) {
+            /*
+             * So, we just ignore the exception here.
+             */
+        }
+    };
+    tslib_1.__decorate([
+        autobind
+    ], FileInputPure.prototype, "_onClearClick", null);
+    tslib_1.__decorate([
+        autobind
+    ], FileInputPure.prototype, "_onRemoveClick", null);
+    tslib_1.__decorate([
+        autobind
+    ], FileInputPure.prototype, "_onBrowseContainerClick", null);
+    tslib_1.__decorate([
+        autobind
+    ], FileInputPure.prototype, "_onBrowseContainerKeyPress", null);
+    tslib_1.__decorate([
+        autobind
+    ], FileInputPure.prototype, "_resolveFileInput", null);
+    tslib_1.__decorate([
+        autobind
+    ], FileInputPure.prototype, "_onDragEnter", null);
+    tslib_1.__decorate([
+        autobind
+    ], FileInputPure.prototype, "_onDragLeave", null);
+    tslib_1.__decorate([
+        autobind
+    ], FileInputPure.prototype, "_onDragOver", null);
+    tslib_1.__decorate([
+        autobind
+    ], FileInputPure.prototype, "_onDrop", null);
+    tslib_1.__decorate([
+        autobind
+    ], FileInputPure.prototype, "_onFileInputChange", null);
+    return FileInputPure;
+}(BaseComponent));

Components/FileInput/index.d.ts

 export * from './FileInput';
-export * from './FileInput.Props';
+

Components/FileInput/index.js

@@ -1,1 +0,4 @@
-export*from"./FileInput";export*from"./FileInput.Props";
+export * from './FileInput';
+
+// @NOTE: Explicit export list due to typescript compiler bug 18644 where a require is generated for export * when const enum's are present
+//export { FileEncoding, FileInputContentType, FileInputUpdateEventData, FileInputResult, FileInputData, FileInputControlLimitEventData, IFileInputProps } from './FileInput.Props'; 

Components/FilterBar/FilterBar.js

@@ -1,1 +0,118 @@
-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};
+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 = /** @class */ (function (_super) {
+    tslib_1.__extends(FilterBar, _super);
+    function FilterBar(props) {
+        var _this = _super.call(this, props) || this;
+        if (!props.filter) {
+            throw new Error('Cannot create a FilterBar without a filter prop.');
+        }
+        _this.state = { hasChangesToReset: props.filter.hasChangesToReset(), hasChangesToApply: props.filter.hasChangesToApply() };
+        return _this;
+    }
+    FilterBar.prototype.focus = function () {
+        if (this._filterItemRefs && this._filterItemRefs.length > 0) {
+            this._filterItemRefs[0].focus();
+        }
+    };
+    FilterBar.prototype.forceUpdate = function () {
+        _super.prototype.forceUpdate.call(this);
+        if (this._filterItemRefs) {
+            this._filterItemRefs.forEach(function (filterItem) { return filterItem.forceUpdate(); });
+        }
+    };
+    FilterBar.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);
+        if (this.props.onMounted) {
+            this.props.onMounted(this);
+        }
+    };
+    FilterBar.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);
+    };
+    FilterBar.prototype.componentDidUpdate = function () {
+        if (this.props.onRenderComplete) {
+            this.props.onRenderComplete();
+        }
+    };
+    FilterBar.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, children = _a.children, filter = _a.filter, className = _a.className;
+        var _b = this.state, hasChangesToApply = _b.hasChangesToApply, hasChangesToReset = _b.hasChangesToReset;
+        this._filterItemRefs = [];
+        var childrenWithProps = React.Children.map(children, function (child) {
+            if (child === null) {
+                return null;
+            }
+            var childElement = child;
+            var childWithProps = React.cloneElement(childElement, {
+                filter: childElement.props.filter || filter,
+                ref: (function (elem) {
+                    if (elem) {
+                        _this._filterItemRefs.push(elem);
+                    }
+                })
+            });
+            return React.createElement("div", { className: 'vss-FilterBar--item' }, childWithProps);
+        });
+        var resetText = Filter.statesAreEqual(filter.getDefaultState(), {}) ?
+            VSSUIResources.ClearFilterBarLinkText :
+            VSSUIResources.ResetFilterBarLinkText;
+        return React.createElement("div", { className: css('vss-FilterBar', className) },
+            React.createElement("div", { className: 'vss-FilterBar--list' },
+                childrenWithProps,
+                React.createElement("div", { className: 'vss-FilterBar--action vss-FilterBar--action-clear' },
+                    React.createElement(CommandButton, { disabled: !hasChangesToReset, onClick: this._onReset, iconProps: { iconName: 'Clear' }, ariaLabel: VSSUIResources.ClearFilterBarLinkAriaLabel }, resetText)),
+                filter.usesApplyMode() &&
+                    React.createElement("div", { className: 'vss-FilterBar--action vss-FilterBar--action-apply' },
+                        React.createElement(CommandButton, { disabled: !hasChangesToApply, onClick: this._onApplyChanges, iconProps: { iconName: 'CheckMark' } }, VSSUIResources.ApplyChangesFilterBarText))));
+    };
+    FilterBar.prototype._onFilterChanged = function (changedState) {
+        var hasChangesToApply = this.props.filter.hasChangesToApply();
+        var hasChangesToReset = this.props.filter.hasChangesToReset();
+        if (hasChangesToApply !== this.state.hasChangesToApply ||
+            hasChangesToReset !== this.state.hasChangesToReset) {
+            this.setState({
+                hasChangesToApply: this.props.filter.hasChangesToApply(),
+                hasChangesToReset: this.props.filter.hasChangesToReset()
+            });
+        }
+    };
+    FilterBar.prototype._onFilterApplied = function (changedState) {
+        var hasChangesToApply = this.props.filter.hasChangesToApply();
+        if (hasChangesToApply !== this.state.hasChangesToApply) {
+            this.setState({
+                hasChangesToApply: hasChangesToApply
+            });
+        }
+    };
+    FilterBar.prototype._onReset = function () {
+        this.props.filter.reset();
+        this.focus();
+    };
+    FilterBar.prototype._onApplyChanges = function () {
+        this.props.filter.applyChanges();
+        this.focus();
+    };
+    tslib_1.__decorate([
+        autobind
+    ], FilterBar.prototype, "_onFilterChanged", null);
+    tslib_1.__decorate([
+        autobind
+    ], FilterBar.prototype, "_onFilterApplied", null);
+    tslib_1.__decorate([
+        autobind
+    ], FilterBar.prototype, "_onReset", null);
+    tslib_1.__decorate([
+        autobind
+    ], FilterBar.prototype, "_onApplyChanges", null);
+    return FilterBar;
+}(BaseComponent));
+export { FilterBar };

Components/FilterBar/FilterBarItem.js

@@ -1,1 +0,57 @@
-import*as tslib_1 from"tslib";import{autobind,BaseComponent}from"office-ui-fabric-react/lib/Utilities";import{FILTER_CHANGE_EVENT}from"../../Utilities/Filter";var FilterBarItem=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return tslib_1.__extends(e,t),e.prototype.componentWillMount=function(){var t=this.props.filter.getFilterItemState(this.props.filterItemKey);this.setState({value:t&&t.value,operator:t&&t.operator});var e=this.getThrottleWait();this._throttledSetFilterValue=e?this._async.debounce(this._setFilterValue,e,{leading:!1,trailing:!0}):this._setFilterValue.bind(this)},e.prototype.componentDidMount=function(){this._events.on(this.props.filter,FILTER_CHANGE_EVENT,this._onFilterChanged)},e.prototype.componentWillUnmount=function(){this._events.off(this.props.filter,FILTER_CHANGE_EVENT,this._onFilterChanged)},e.prototype._onFilterChanged=function(t){t.hasOwnProperty(this.props.filterItemKey)&&this.onFilterChanged(t[this.props.filterItemKey])},e.prototype.onFilterChanged=function(t){this.setState({value:t&&t.value,operator:t&&t.operator})},e.prototype.getThrottleWait=function(){return 0},e.prototype.setFilterValue=function(t){this.getThrottleWait()&&this.setState({value:t&&t.value,operator:t&&t.operator}),this._throttledSetFilterValue(t)},e.prototype._setFilterValue=function(t){this.props.filter.setFilterItemState(this.props.filterItemKey,t)},tslib_1.__decorate([autobind],e.prototype,"_onFilterChanged",null),e}(BaseComponent);export{FilterBarItem};
+import * as tslib_1 from "tslib";
+import { autobind, BaseComponent } from 'office-ui-fabric-react/lib/Utilities';
+import { FILTER_CHANGE_EVENT } from '../../Utilities/Filter';
+var FilterBarItem = /** @class */ (function (_super) {
+    tslib_1.__extends(FilterBarItem, _super);
+    function FilterBarItem() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    FilterBarItem.prototype.componentWillMount = function () {
+        var itemState = this.props.filter.getFilterItemState(this.props.filterItemKey);
+        this.setState({ value: itemState && itemState.value, operator: itemState && itemState.operator });
+        var throttleWait = this.getThrottleWait();
+        if (throttleWait) {
+            this._throttledSetFilterValue = this._async.debounce(this._setFilterValue, throttleWait, { leading: false, trailing: true });
+        }
+        else {
+            this._throttledSetFilterValue = this._setFilterValue.bind(this);
+        }
+    };
+    FilterBarItem.prototype.componentDidMount = function () {
+        this._events.on(this.props.filter, FILTER_CHANGE_EVENT, this._onFilterChanged);
+    };
+    FilterBarItem.prototype.componentWillUnmount = function () {
+        this._events.off(this.props.filter, FILTER_CHANGE_EVENT, this._onFilterChanged);
+    };
+    FilterBarItem.prototype._onFilterChanged = function (changedState) {
+        if (changedState.hasOwnProperty(this.props.filterItemKey)) {
+            this.onFilterChanged(changedState[this.props.filterItemKey]);
+        }
+    };
+    FilterBarItem.prototype.onFilterChanged = function (filterState) {
+        this.setState({
+            value: filterState && filterState.value,
+            operator: filterState && filterState.operator
+        });
+    };
+    FilterBarItem.prototype.getThrottleWait = function () {
+        return 0;
+    };
+    FilterBarItem.prototype.setFilterValue = function (filterState) {
+        if (this.getThrottleWait()) {
+            this.setState({
+                value: filterState && filterState.value,
+                operator: filterState && filterState.operator
+            });
+        }
+        this._throttledSetFilterValue(filterState);
+    };
+    FilterBarItem.prototype._setFilterValue = function (filterState) {
+        this.props.filter.setFilterItemState(this.props.filterItemKey, filterState);
+    };
+    tslib_1.__decorate([
+        autobind
+    ], FilterBarItem.prototype, "_onFilterChanged", null);
+    return FilterBarItem;
+}(BaseComponent));
+export { FilterBarItem };

Components/FilterBar/index.d.ts

 export * from './FilterBar';
-export * from './FilterBar.Props';
+
 export * from './FilterBarItem';
-export * from './FilterBarItem.Props';
+
 export * from './KeywordFilterBarItem';
 export * from './TextFilterBarItem';
-export * from './TextFilterBarItem.Props';
+

Components/FilterBar/index.js

@@ -1,1 +0,8 @@
-export*from"./FilterBar";export*from"./FilterBarItem";export*from"./KeywordFilterBarItem";export*from"./TextFilterBarItem";
+export * from './FilterBar';
+export * from './FilterBarItem';
+export * from './KeywordFilterBarItem';
+export * from './TextFilterBarItem';
+// @NOTE: Explicit export list due to typescript compiler bug 18644 where a require is generated for export * when const enum's are present
+//export { IFilterBar, IFilterBarProps } from './FilterBar.Props';
+//export { IFilterBarItem, IFilterBarItemProps } from './FilterBarItem.Props';
+//export { ITextFilterBarProps } from './TextFilterBarItem.Props'; 

Components/FilterBar/KeywordFilterBarItem.js

@@ -1,1 +0,27 @@
-import*as tslib_1 from"tslib";import*as React from"react";import{autobind}from"office-ui-fabric-react/lib/Utilities";import{Icon}from"office-ui-fabric-react/lib/Icon";import{TextFilterBarItem}from"../../Components/FilterBar/TextFilterBarItem";import*as VSSUIResources from"../../Resources/VSS.Resources.VSSUI";var KeywordFilterBarItem=function(e){function r(){return null!==e&&e.apply(this,arguments)||this}return tslib_1.__extends(r,e),r.prototype.getExtraTextFieldProps=function(){return{className:"vss-FilterBar--item-keyword",onRenderAddon:this._onRenderAddon,placeholder:this.props.placeholder||VSSUIResources.KeywordFilterBarItemPlaceholderText}},r.prototype._onRenderAddon=function(){return React.createElement(Icon,{iconName:"Filter"})},tslib_1.__decorate([autobind],r.prototype,"_onRenderAddon",null),r}(TextFilterBarItem);export{KeywordFilterBarItem};
+import * as tslib_1 from "tslib";
+import * as React from 'react';
+import { autobind } from 'office-ui-fabric-react/lib/Utilities';
+import { Icon } from 'office-ui-fabric-react/lib/Icon';
+import { TextFilterBarItem } from '../../Components/FilterBar/TextFilterBarItem';
+import * as VSSUIResources from '../../Resources/VSS.Resources.VSSUI';
+var KeywordFilterBarItem = /** @class */ (function (_super) {
+    tslib_1.__extends(KeywordFilterBarItem, _super);
+    function KeywordFilterBarItem() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    KeywordFilterBarItem.prototype.getExtraTextFieldProps = function () {
+        return {
+            className: 'vss-FilterBar--item-keyword',
+            onRenderAddon: this._onRenderAddon,
+            placeholder: this.props.placeholder || VSSUIResources.KeywordFilterBarItemPlaceholderText
+        };
+    };
+    KeywordFilterBarItem.prototype._onRenderAddon = function () {
+        return React.createElement(Icon, { iconName: 'Filter' });
+    };
+    tslib_1.__decorate([
+        autobind
+    ], KeywordFilterBarItem.prototype, "_onRenderAddon", null);
+    return KeywordFilterBarItem;
+}(TextFilterBarItem));
+export { KeywordFilterBarItem };

Components/FilterBar/TextFilterBarItem.js

@@ -1,1 +0,88 @@
-import*as tslib_1 from"tslib";import*as React from"react";import*as VSSUIResources from"../../Resources/VSS.Resources.VSSUI";import{autobind}from"office-ui-fabric-react/lib/Utilities";import{TextField}from"office-ui-fabric-react/lib/TextField";import{FilterBarItem}from"../../Components/FilterBar/FilterBarItem";var DEFAULT_MAX_TEXT_LENGTH=200,DEFAULT_THROTTLE_WAIT=200,TextFilterBarItem=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return tslib_1.__extends(e,t),e.prototype.focus=function(){return this._textField.focus()},e.prototype.render=function(){var t=this,e=this.state.value,r=this.props,o=r.placeholder,i=r.maxTextLength,n=e?{iconName:"Clear",className:"clear-filter-input",tabIndex:0,onClick:this._onClearInputClick,onKeyPress:this._onClearInputKeyPress,role:"button",ariaLabel:VSSUIResources.FilterTextItemClearLabel}:void 0;return React.createElement(TextField,tslib_1.__assign({componentRef:function(e){return t._textField=e},className:"vss-FilterBar--item-text",value:e||"",placeholder:o,onChanged:this._onTextChanged,onKeyDown:this._onKeyDown,maxLength:i||DEFAULT_MAX_TEXT_LENGTH,iconProps:n},this.getExtraTextFieldProps()))},e.prototype.getExtraTextFieldProps=function(){return null},e.prototype.getThrottleWait=function(){var t=this.props.throttleWait;return void 0===t?DEFAULT_THROTTLE_WAIT:t},e.prototype._onClearInputKeyPress=function(t){13!==t.which&&32!==t.which||this._resetText()},e.prototype._onClearInputClick=function(){this._resetText()},e.prototype._resetText=function(){this.setFilterValue({value:""}),this.focus()},e.prototype._onTextChanged=function(t){this.setFilterValue({value:t})},e.prototype._onKeyDown=function(t){switch(t.which){case 13:this.props.filter.setFilterItemState(this.props.filterItemKey,{value:this.state.value}),this.props.filter.applyChanges();break;case 27:this.setFilterValue({value:""}),this.setState({value:""}),this.props.filter.applyChanges();break;default:return}t.preventDefault(),t.stopPropagation()},tslib_1.__decorate([autobind],e.prototype,"_onClearInputKeyPress",null),tslib_1.__decorate([autobind],e.prototype,"_onClearInputClick",null),tslib_1.__decorate([autobind],e.prototype,"_onTextChanged",null),tslib_1.__decorate([autobind],e.prototype,"_onKeyDown",null),e}(FilterBarItem);export{TextFilterBarItem};
+import * as tslib_1 from "tslib";
+import * as React from 'react';
+import * as VSSUIResources from '../../Resources/VSS.Resources.VSSUI';
+import { autobind } from 'office-ui-fabric-react/lib/Utilities';
+import { TextField } from 'office-ui-fabric-react/lib/TextField';
+import { FilterBarItem } from '../../Components/FilterBar/FilterBarItem';
+var DEFAULT_MAX_TEXT_LENGTH = 200;
+var DEFAULT_THROTTLE_WAIT = 200;
+var TextFilterBarItem = /** @class */ (function (_super) {
+    tslib_1.__extends(TextFilterBarItem, _super);
+    function TextFilterBarItem() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    TextFilterBarItem.prototype.focus = function () {
+        return this._textField.focus();
+    };
+    TextFilterBarItem.prototype.render = function () {
+        var _this = this;
+        var value = this.state.value;
+        var _a = this.props, placeholder = _a.placeholder, maxTextLength = _a.maxTextLength;
+        var iconProps = value ? {
+            iconName: 'Clear',
+            className: 'clear-filter-input',
+            tabIndex: 0,
+            onClick: this._onClearInputClick,
+            onKeyPress: this._onClearInputKeyPress,
+            role: "button",
+            ariaLabel: VSSUIResources.FilterTextItemClearLabel
+        } : undefined;
+        return React.createElement(TextField, tslib_1.__assign({ componentRef: function (element) { return _this._textField = element; }, className: 'vss-FilterBar--item-text', value: value || '', placeholder: placeholder, onChanged: this._onTextChanged, onKeyDown: this._onKeyDown, maxLength: maxTextLength || DEFAULT_MAX_TEXT_LENGTH, iconProps: iconProps }, this.getExtraTextFieldProps()));
+    };
+    TextFilterBarItem.prototype.getExtraTextFieldProps = function () {
+        return null;
+    };
+    TextFilterBarItem.prototype.getThrottleWait = function () {
+        var throttleWait = this.props.throttleWait;
+        return throttleWait === undefined ? DEFAULT_THROTTLE_WAIT : throttleWait;
+    };
+    TextFilterBarItem.prototype._onClearInputKeyPress = function (ev) {
+        if (ev.which === 13 /* enter */ || ev.which === 32 /* space */) {
+            this._resetText();
+        }
+    };
+    TextFilterBarItem.prototype._onClearInputClick = function () {
+        this._resetText();
+    };
+    TextFilterBarItem.prototype._resetText = function () {
+        this.setFilterValue({ value: '' });
+        this.focus();
+    };
+    TextFilterBarItem.prototype._onTextChanged = function (text) {
+        this.setFilterValue({ value: text });
+    };
+    TextFilterBarItem.prototype._onKeyDown = function (ev) {
+        switch (ev.which) {
+            case 13 /* enter */:
+                this.props.filter.setFilterItemState(this.props.filterItemKey, { value: this.state.value });
+                this.props.filter.applyChanges();
+                break;
+            case 27 /* escape */:
+                this.setFilterValue({ value: '' });
+                this.setState({
+                    value: ''
+                });
+                this.props.filter.applyChanges();
+                break;
+            default:
+                return;
+        }
+        // We only get here if the keypress has been handled.
+        ev.preventDefault();
+        ev.stopPropagation();
+    };
+    tslib_1.__decorate([
+        autobind
+    ], TextFilterBarItem.prototype, "_onClearInputKeyPress", null);
+    tslib_1.__decorate([
+        autobind
+    ], TextFilterBarItem.prototype, "_onClearInputClick", null);
+    tslib_1.__decorate([
+        autobind
+    ], TextFilterBarItem.prototype, "_onTextChanged", null);
+    tslib_1.__decorate([
+        autobind
+    ], TextFilterBarItem.prototype, "_onKeyDown", null);
+    return TextFilterBarItem;
+}(FilterBarItem));
+export { TextFilterBarItem };

Components/Hub/Hub.js

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

Components/Hub/index.js

@@ -1,1 +0,3 @@
-export*from"./Hub";
+export * from "./Hub";
+// @NOTE: Explicit export list due to typescript compiler bug 18644 where a require is generated for export * when const enum's are present
+//export { IHub, IHubProps } from "./Hub.Props"; 

Components/HubHeader/HubBreadcrumb.js

@@ -1,1 +0,153 @@
-import*as tslib_1 from"tslib";import*as React from"react";import{Breadcrumb}from"office-ui-fabric-react/lib/Breadcrumb";import{Callout}from"office-ui-fabric-react/lib/Callout";import{Link}from"office-ui-fabric-react/lib/Link";import{autobind,BaseComponent,css}from"office-ui-fabric-react/lib/Utilities";import{VssIcon}from"../../VssIcon";import{PickList,PICKER_CHANGE_EVENT}from"../../PickList";import*as VSSUIResources from"../../Resources/VSS.Resources.VSSUI";import"./HubBreadcrumb.css";export var HEADER_PICKER_CHANGE_EVENT=PICKER_CHANGE_EVENT;export function getDropdownIcon(e){};var PickerDropdown=function(e){function t(t){var i=e.call(this,t)||this;return i.updateDelegate=function(){return i.forceUpdate()},i.state={calloutIsVisible:!1},i}return tslib_1.__extends(t,e),t.prototype.render=function(){var e=this,t=this.props,i=t.getPinElement,s=t.item,r=t.minWidth,o=t.pickListClassName;if(this.state.calloutIsVisible){var n=s.headerItemPicker;return React.createElement(Callout,{isBeakVisible:!1,target:i(),onPositioned:this.onPositioned,onDismiss:this.onDismiss},React.createElement(PickList,{componentRef:function(t){return e._pickList=t},className:css("picker-dropdown",o),items:n.getItems(),getListItem:n.getListItem,onSelectionChanged:s.onSelectionChanged,initiallySelectedItems:n.selectedItem?[n.selectedItem]:void 0,indicators:n.dropdownIndicators,groups:n.groups,isSearchable:n.isSearchable,searchTextPlaceholder:n.searchTextPlaceholder,searchResultsGroupName:n.searchResultsGroupName,searchNoResultsText:n.searchNoResultsText,onSearch:n.onSearch,getActions:function(e){return n.actions},noItemsText:n.noItemsText,width:r,shouldVirtualize:function(e){return(e||[]).length>50}}))}return null},t.prototype.componentDidMount=function(){this._events.on(this.props.item.headerItemPicker,HEADER_PICKER_CHANGE_EVENT,this.updateDelegate)},t.prototype.componentWillUnmount=function(){this._events.off(this.props.item.headerItemPicker,HEADER_PICKER_CHANGE_EVENT,this.updateDelegate)},t.prototype.componentWillReceiveProps=function(e){this.props.item.headerItemPicker!==e.item.headerItemPicker&&(this._events.off(this.props.item.headerItemPicker,HEADER_PICKER_CHANGE_EVENT,this.updateDelegate),this._events.on(e.item.headerItemPicker,HEADER_PICKER_CHANGE_EVENT,this.updateDelegate))},t.prototype.openDropdown=function(){this.setState({calloutIsVisible:!0})},t.prototype.closeDropdown=function(){this.setState({calloutIsVisible:!1})},t.prototype.onPositioned=function(){this._pickList.focus()},t.prototype.onDismiss=function(){this.closeDropdown()},tslib_1.__decorate([autobind],t.prototype,"onPositioned",null),tslib_1.__decorate([autobind],t.prototype,"onDismiss",null),t}(BaseComponent);export{PickerDropdown};var HubBreadcrumb=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.pinElements={},t}return tslib_1.__extends(t,e),t.prototype.getIcon=function(e){return e?React.createElement(VssIcon,tslib_1.__assign({className:"vss-HubBreadcrumb--item-leftIcon"},e)):null},t.prototype.onRenderItem=function(e,t){var i=this,s=tslib_1.__assign({},e);delete s.onClick,delete s.href;var r=this.getIcon(e.leftIconProps),o=t(s),n=o.props&&o.props.className,c=tslib_1.__assign({},o.props,{className:n?n+" vss-HubBreadcrumb--itemText":"vss-HubBreadcrumb--itemText",style:o.props.style?tslib_1.__assign({},o.props.style):{}});this.props.maxItemWidth&&(c.style.maxWidth=this.props.maxItemWidth);var a=React.cloneElement(o,c),m=e.headerItemPicker&&!!e.onClick;if(e.headerItemPicker){var l=null;return m&&(l=React.createElement(VssIcon,{iconName:"ChevronDown",iconType:0,key:"RightIcon$"+e.key,className:css("vss-HubBreadcrumb--item-dropdown")})),React.createElement("div",{ref:function(t){i.pinElements[e.key]=t},className:css({"vss-HubBreadcrumb--item":!0,"no-click":!e.onClick})},React.createElement(Link,{key:"BreadcrumbItem$"+e.key,onClick:e.onClick,href:e.href},React.createElement("div",{className:"vss-HubBreadcrumb--itemContainer"},r,a,l)))}return e.onClick||e.href?React.createElement("div",{className:css("vss-HubBreadcrumb--item")},React.createElement(Link,{key:"BreadcrumbItem$"+e.key,onClick:e.onClick,href:e.href},React.createElement("div",{className:"vss-HubBreadcrumb--itemContainer"},r,a))):React.createElement("div",{className:css("vss-HubBreadcrumb--item")},r,a)},t.prototype.render=function(){for(var e,t=this,i=this.props,s=i.items,r=i.pickListClassName,o=0,n=s;o<n.length;o++){var c=n[o];c.headerItemPicker&&(e=c)}return React.createElement("div",{className:"vss-HubBreadcrumb--container"},React.createElement(Breadcrumb,{onReduceData:function(e){},maxDisplayedItems:4,items:s,className:css("vss-HubBreadcrumb"),onRenderItem:this.onRenderItem,ariaLabel:VSSUIResources.BreadcrumbAriaLabel}),e&&React.createElement(PickerDropdown,{ref:function(e){t.pickList=e},item:e,getPinElement:function(){return t.pinElements[e.key]},minWidth:this.pinElements[e.key]&&this.pinElements[e.key].clientWidth,pickListClassName:r}))},tslib_1.__decorate([autobind],t.prototype,"onRenderItem",null),t}(BaseComponent);export{HubBreadcrumb};
+import * as tslib_1 from "tslib";
+import * as React from "react";
+import { Breadcrumb } from "office-ui-fabric-react/lib/Breadcrumb";
+import { Callout } from "office-ui-fabric-react/lib/Callout";
+import { Link } from "office-ui-fabric-react/lib/Link";
+import { autobind, BaseComponent, css } from "office-ui-fabric-react/lib/Utilities";
+import { VssIcon } from "../../VssIcon";
+import { PickList, PICKER_CHANGE_EVENT } from "../../PickList";
+import * as VSSUIResources from '../../Resources/VSS.Resources.VSSUI';
+import "./HubBreadcrumb.css";
+export var HEADER_PICKER_CHANGE_EVENT = PICKER_CHANGE_EVENT;
+/**
+ *
+ * @param item Properties for instantiating the hub dropdown.
+ */
+export function getDropdownIcon(item) { }
+var PickerDropdown = /** @class */ (function (_super) {
+    tslib_1.__extends(PickerDropdown, _super);
+    function PickerDropdown(props) {
+        var _this = _super.call(this, props) || this;
+        _this.updateDelegate = function () { return _this.forceUpdate(); };
+        _this.state = { calloutIsVisible: false };
+        return _this;
+    }
+    PickerDropdown.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, getPinElement = _a.getPinElement, item = _a.item, minWidth = _a.minWidth, pickListClassName = _a.pickListClassName;
+        if (this.state.calloutIsVisible) {
+            var picker_1 = item.headerItemPicker;
+            return React.createElement(Callout, { isBeakVisible: false, target: getPinElement(), onPositioned: this.onPositioned, onDismiss: this.onDismiss },
+                React.createElement(PickList, { componentRef: function (pickList) { return (_this._pickList = pickList); }, className: css("picker-dropdown", pickListClassName), items: picker_1.getItems(), getListItem: picker_1.getListItem, onSelectionChanged: item.onSelectionChanged, initiallySelectedItems: picker_1.selectedItem ? [picker_1.selectedItem] : undefined, indicators: picker_1.dropdownIndicators, groups: picker_1.groups, isSearchable: picker_1.isSearchable, searchTextPlaceholder: picker_1.searchTextPlaceholder, searchResultsGroupName: picker_1.searchResultsGroupName, searchNoResultsText: picker_1.searchNoResultsText, onSearch: picker_1.onSearch, getActions: function (items) { return picker_1.actions; }, noItemsText: picker_1.noItemsText, width: minWidth, shouldVirtualize: function (items) {
+                        return (items || []).length > 50;
+                    } }));
+        }
+        return null;
+    };
+    PickerDropdown.prototype.componentDidMount = function () {
+        this._events.on(this.props.item.headerItemPicker, HEADER_PICKER_CHANGE_EVENT, this.updateDelegate);
+    };
+    PickerDropdown.prototype.componentWillUnmount = function () {
+        this._events.off(this.props.item.headerItemPicker, HEADER_PICKER_CHANGE_EVENT, this.updateDelegate);
+    };
+    PickerDropdown.prototype.componentWillReceiveProps = function (nextProps) {
+        if (this.props.item.headerItemPicker !== nextProps.item.headerItemPicker) {
+            this._events.off(this.props.item.headerItemPicker, HEADER_PICKER_CHANGE_EVENT, this.updateDelegate);
+            this._events.on(nextProps.item.headerItemPicker, HEADER_PICKER_CHANGE_EVENT, this.updateDelegate);
+        }
+    };
+    PickerDropdown.prototype.openDropdown = function () {
+        this.setState({ calloutIsVisible: true });
+    };
+    PickerDropdown.prototype.closeDropdown = function () {
+        this.setState({ calloutIsVisible: false });
+    };
+    PickerDropdown.prototype.onPositioned = function () {
+        this._pickList.focus();
+    };
+    PickerDropdown.prototype.onDismiss = function () {
+        this.closeDropdown();
+    };
+    tslib_1.__decorate([
+        autobind
+    ], PickerDropdown.prototype, "onPositioned", null);
+    tslib_1.__decorate([
+        autobind
+    ], PickerDropdown.prototype, "onDismiss", null);
+    return PickerDropdown;
+}(BaseComponent));
+export { PickerDropdown };
+var HubBreadcrumb = /** @class */ (function (_super) {
+    tslib_1.__extends(HubBreadcrumb, _super);
+    function HubBreadcrumb() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.pinElements = {};
+        return _this;
+    }
+    HubBreadcrumb.prototype.getIcon = function (iconProps) {
+        if (iconProps) {
+            return React.createElement(VssIcon, tslib_1.__assign({ className: "vss-HubBreadcrumb--item-leftIcon" }, iconProps));
+        }
+        return null;
+    };
+    HubBreadcrumb.prototype.onRenderItem = function (item, defaultRenderer) {
+        var _this = this;
+        // We want the text AND the icon to be clickable, but since the defaultRenderer attaches the onClick
+        // to the text only, we make sure that doesn't even render an on-click and that the onclick goes to
+        // the element that contains both the text and icon.
+        var itemNoOnClick = tslib_1.__assign({}, item);
+        delete itemNoOnClick.onClick;
+        delete itemNoOnClick.href;
+        var icon = this.getIcon(item.leftIconProps);
+        var originalDefaultRendered = defaultRenderer(itemNoOnClick);
+        var originalClassName = originalDefaultRendered.props && originalDefaultRendered.props.className;
+        var clonedElementProps = tslib_1.__assign({}, originalDefaultRendered.props, { className: originalClassName
+                ? originalClassName + " vss-HubBreadcrumb--itemText"
+                : "vss-HubBreadcrumb--itemText", style: originalDefaultRendered.props.style ? tslib_1.__assign({}, originalDefaultRendered.props.style) : {} });
+        if (this.props.maxItemWidth) {
+            clonedElementProps.style.maxWidth = this.props.maxItemWidth;
+        }
+        var defaultRendered = React.cloneElement(originalDefaultRendered, clonedElementProps);
+        var breadcrumbItem = null;
+        var pickerDropdown = null;
+        var iconVisible = item.headerItemPicker && !!item.onClick;
+        var picker = item.headerItemPicker;
+        if (picker) {
+            var dropdownIcon = null;
+            if (iconVisible) {
+                dropdownIcon = (React.createElement(VssIcon, { iconName: "ChevronDown", iconType: 0 /* fabric */, key: "RightIcon$" + item.key, className: css("vss-HubBreadcrumb--item-dropdown") }));
+            }
+            return (React.createElement("div", { ref: function (elem) {
+                    _this.pinElements[item.key] = elem;
+                }, className: css({ "vss-HubBreadcrumb--item": true, "no-click": !item.onClick }) },
+                React.createElement(Link, { key: "BreadcrumbItem$" + item.key, onClick: item.onClick, href: item.href },
+                    React.createElement("div", { className: 'vss-HubBreadcrumb--itemContainer' },
+                        icon,
+                        defaultRendered,
+                        dropdownIcon))));
+        }
+        else if (item.onClick || item.href) {
+            return (React.createElement("div", { className: css("vss-HubBreadcrumb--item") },
+                React.createElement(Link, { key: "BreadcrumbItem$" + item.key, onClick: item.onClick, href: item.href },
+                    React.createElement("div", { className: 'vss-HubBreadcrumb--itemContainer' },
+                        icon,
+                        defaultRendered))));
+        }
+        else {
+            return (React.createElement("div", { className: css("vss-HubBreadcrumb--item") },
+                icon,
+                defaultRendered));
+        }
+    };
+    HubBreadcrumb.prototype.render = function () {
+        var _this = this;
+        var itemWithPicker;
+        var _a = this.props, items = _a.items, pickListClassName = _a.pickListClassName;
+        //We only get the last item in the list of items that contains a headerItemPicker.
+        for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {
+            var item = items_1[_i];
+            if (item.headerItemPicker) {
+                itemWithPicker = item;
+            }
+        }
+        return (React.createElement("div", { className: "vss-HubBreadcrumb--container" },
+            React.createElement(Breadcrumb, { onReduceData: function (data) { return undefined; }, maxDisplayedItems: 4, items: items, className: css("vss-HubBreadcrumb"), onRenderItem: this.onRenderItem, ariaLabel: VSSUIResources.BreadcrumbAriaLabel }),
+            itemWithPicker &&
+                React.createElement(PickerDropdown, { ref: function (pickList) { _this.pickList = pickList; }, item: itemWithPicker, getPinElement: function () { return _this.pinElements[itemWithPicker.key]; }, minWidth: this.pinElements[itemWithPicker.key] && this.pinElements[itemWithPicker.key].clientWidth, pickListClassName: pickListClassName })));
+    };
+    tslib_1.__decorate([
+        autobind
+    ], HubBreadcrumb.prototype, "onRenderItem", null);
+    return HubBreadcrumb;
+}(BaseComponent));
+export { HubBreadcrumb };

Components/HubHeader/HubHeader.js

@@ -1,1 +0,131 @@
-import*as tslib_1 from"tslib";import*as React from"react";import{autobind,BaseComponent,css}from"office-ui-fabric-react/lib/Utilities";import{HubBreadcrumb}from"../../Components/HubHeader/HubBreadcrumb";import{HubTitle}from"../../Components/HubHeader/HubTitle";import{ItemIndicatorSet}from"../../ItemIndicator";import{ObservableLike}from"../../Utilities/Observable";import"./HubHeader.css";var MAX_BREADCRUMB_WIDTH="340px",HubHeader=function(e){function t(t){var r=e.call(this,t)||this;return r.state={headerItemPicker:ObservableLike.getValue(r.props.headerItemPicker)},r}return tslib_1.__extends(t,e),t.prototype.componentWillMount=function(){ObservableLike.subscribe(this.props.headerItemPicker,this.onHeaderPickerChanged)},t.prototype.componentWillUnmount=function(){ObservableLike.unsubscribe(this.props.headerItemPicker,this.onHeaderPickerChanged)},t.prototype.componentWillReceiveProps=function(e){this.props.headerItemPicker!==e.headerItemPicker&&(this.setState({headerItemPicker:ObservableLike.getValue(e.headerItemPicker)}),ObservableLike.unsubscribe(this.props.headerItemPicker,this.onHeaderPickerChanged),ObservableLike.subscribe(e.headerItemPicker,this.onHeaderPickerChanged))},t.prototype.getTitle=function(){return this.props.breadcrumbItems&&this.props.breadcrumbItems.length>0||this.props.headerItemPicker?this.getBreadcrumb():this.props.title?React.createElement(HubTitle,{titleText:this.props.title,iconProps:this.props.iconProps}):(console.log("Must use title or breadcrumb items + headerItemPicker"),null)},t.prototype.getBreadcrumb=function(){var e=this,t=this.props.breadcrumbItems?this.props.breadcrumbItems.slice():[],r=this.props,i=r.maxBreadcrumbItemWidth,s=r.collapseBreadcrumb,o=r.nonInteractive,c=r.iconProps,n=r.pickListClassName,a=r.title,m=this.state.headerItemPicker;if(m&&m.getListItem){var d=m.getListItem(m.selectedItem),l=m.getTitleTextForItem?m.getTitleTextForItem(m.selectedItem):d&&d.name,p=o?void 0:this.onHeaderItemClick,u={key:"title-item",text:a||l,leftIconProps:c,onClick:p,onSelectionChanged:this.onSelectionChanged,headerItemPicker:m};t.push(u)}else if(a){u={key:"title-item",text:a,leftIconProps:c};t.push(u)}return s&&(t=t.slice(t.length-1)),React.createElement(HubBreadcrumb,{ref:function(t){e._hubBreadcrumb=t},items:t,maxItemWidth:"string"==typeof i?i:MAX_BREADCRUMB_WIDTH,pickListClassName:n})},t.prototype.onHeaderItemClick=function(){this._hubBreadcrumb&&this._hubBreadcrumb.pickList&&this._hubBreadcrumb.pickList.openDropdown()},t.prototype.onSelectionChanged=function(e){var t=this.state.headerItemPicker,r=!1;return t&&t.onSelectedItemChanged&&(r=!0===t.onSelectedItemChanged(e.selectedItems&&e.selectedItems.length>0?e.selectedItems[0]:null),this._hubBreadcrumb&&this._hubBreadcrumb.pickList&&this._hubBreadcrumb.pickList.closeDropdown()),r},t.prototype.onHeaderPickerChanged=function(e){this.setState({headerItemPicker:e})},t.prototype.getIndicators=function(){var e=this.state.headerItemPicker;return e&&e.selectedItem&&e.selectedItemIndicators&&e.selectedItemIndicators.length?React.createElement(ItemIndicatorSet,{indicators:e.selectedItemIndicators.map(function(t){return t.getItemIndicator(e.selectedItem)})}):null},t.prototype.render=function(){return React.createElement("div",{className:css("vss-HubHeader")},this.getTitle(),this.getIndicators(),this.props.children)},tslib_1.__decorate([autobind],t.prototype,"onHeaderItemClick",null),tslib_1.__decorate([autobind],t.prototype,"onSelectionChanged",null),tslib_1.__decorate([autobind],t.prototype,"onHeaderPickerChanged",null),t}(BaseComponent);export{HubHeader};
+import * as tslib_1 from "tslib";
+import * as React from "react";
+import { autobind, BaseComponent, css } from "office-ui-fabric-react/lib/Utilities";
+import { HubBreadcrumb } from "../../Components/HubHeader/HubBreadcrumb";
+import { HubTitle } from "../../Components/HubHeader/HubTitle";
+import { ItemIndicatorSet } from "../../ItemIndicator";
+import { ObservableLike } from '../../Utilities/Observable';
+import "./HubHeader.css";
+var MAX_BREADCRUMB_WIDTH = '340px';
+/**
+ * Component that generates a standard VSTS page header.
+ */
+var HubHeader = /** @class */ (function (_super) {
+    tslib_1.__extends(HubHeader, _super);
+    function HubHeader(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {
+            headerItemPicker: ObservableLike.getValue(_this.props.headerItemPicker)
+        };
+        return _this;
+    }
+    HubHeader.prototype.componentWillMount = function () {
+        ObservableLike.subscribe(this.props.headerItemPicker, this.onHeaderPickerChanged);
+    };
+    HubHeader.prototype.componentWillUnmount = function () {
+        ObservableLike.unsubscribe(this.props.headerItemPicker, this.onHeaderPickerChanged);
+    };
+    HubHeader.prototype.componentWillReceiveProps = function (nextProps) {
+        if (this.props.headerItemPicker !== nextProps.headerItemPicker) {
+            this.setState({ headerItemPicker: ObservableLike.getValue(nextProps.headerItemPicker) });
+            ObservableLike.unsubscribe(this.props.headerItemPicker, this.onHeaderPickerChanged);
+            ObservableLike.subscribe(nextProps.headerItemPicker, this.onHeaderPickerChanged);
+        }
+    };
+    /**
+     * Gets the title (Breadcrumb control or HubTitle control, depending on whether or not breadcrumbitems were passed).
+     */
+    HubHeader.prototype.getTitle = function () {
+        if ((this.props.breadcrumbItems && this.props.breadcrumbItems.length > 0) || this.props.headerItemPicker) {
+            return this.getBreadcrumb();
+        }
+        else {
+            if (this.props.title) {
+                return (React.createElement(HubTitle, { titleText: this.props.title, iconProps: this.props.iconProps }));
+            }
+            else {
+                console.log("Must use title or breadcrumb items + headerItemPicker");
+                return null;
+            }
+        }
+    };
+    HubHeader.prototype.getBreadcrumb = function () {
+        var _this = this;
+        var breadcrumbItems = (this.props.breadcrumbItems) ? this.props.breadcrumbItems.slice() : [];
+        var _a = this.props, maxBreadcrumbItemWidth = _a.maxBreadcrumbItemWidth, collapseBreadcrumb = _a.collapseBreadcrumb, nonInteractive = _a.nonInteractive, iconProps = _a.iconProps, pickListClassName = _a.pickListClassName, title = _a.title;
+        var headerItemPicker = this.state.headerItemPicker;
+        if (headerItemPicker && headerItemPicker.getListItem) {
+            var selectedItem = headerItemPicker.getListItem(headerItemPicker.selectedItem);
+            var selectedItemTitleText = headerItemPicker.getTitleTextForItem ?
+                headerItemPicker.getTitleTextForItem(headerItemPicker.selectedItem) :
+                selectedItem && selectedItem.name;
+            var onClick = nonInteractive ? undefined : this.onHeaderItemClick;
+            var titleItem = {
+                key: 'title-item',
+                text: title ? title : selectedItemTitleText,
+                leftIconProps: iconProps,
+                onClick: onClick,
+                onSelectionChanged: this.onSelectionChanged,
+                headerItemPicker: headerItemPicker
+            };
+            breadcrumbItems.push(titleItem);
+        }
+        else if (title) {
+            var titleItem = {
+                key: 'title-item',
+                text: title,
+                leftIconProps: iconProps,
+            };
+            breadcrumbItems.push(titleItem);
+        }
+        if (collapseBreadcrumb) {
+            breadcrumbItems = breadcrumbItems.slice(breadcrumbItems.length - 1);
+        }
+        return React.createElement(HubBreadcrumb, { ref: function (hubBreadcrumb) { _this._hubBreadcrumb = hubBreadcrumb; }, items: breadcrumbItems, maxItemWidth: typeof maxBreadcrumbItemWidth === 'string' ? maxBreadcrumbItemWidth : MAX_BREADCRUMB_WIDTH, pickListClassName: pickListClassName });
+    };
+    HubHeader.prototype.onHeaderItemClick = function () {
+        if (this._hubBreadcrumb && this._hubBreadcrumb.pickList) {
+            this._hubBreadcrumb.pickList.openDropdown();
+        }
+    };
+    HubHeader.prototype.onSelectionChanged = function (selection) {
+        var headerItemPicker = this.state.headerItemPicker;
+        var preventDefault = false;
+        if (headerItemPicker && headerItemPicker.onSelectedItemChanged) {
+            preventDefault = headerItemPicker.onSelectedItemChanged(selection.selectedItems && selection.selectedItems.length > 0 ? selection.selectedItems[0] : null) === true;
+            if (this._hubBreadcrumb && this._hubBreadcrumb.pickList) {
+                this._hubBreadcrumb.pickList.closeDropdown();
+            }
+        }
+        return preventDefault;
+    };
+    HubHeader.prototype.onHeaderPickerChanged = function (headerItemPicker) {
+        this.setState({ headerItemPicker: headerItemPicker });
+    };
+    HubHeader.prototype.getIndicators = function () {
+        var headerItemPicker = this.state.headerItemPicker;
+        if (headerItemPicker && headerItemPicker.selectedItem && headerItemPicker.selectedItemIndicators && headerItemPicker.selectedItemIndicators.length) {
+            return React.createElement(ItemIndicatorSet, { indicators: headerItemPicker.selectedItemIndicators.map(function (indicator) { return indicator.getItemIndicator(headerItemPicker.selectedItem); }) });
+        }
+        else {
+            return null;
+        }
+    };
+    HubHeader.prototype.render = function () {
+        return (React.createElement("div", { className: css("vss-HubHeader") },
+            this.getTitle(),
+            this.getIndicators(),
+            this.props.children));
+    };
+    tslib_1.__decorate([
+        autobind
+    ], HubHeader.prototype, "onHeaderItemClick", null);
+    tslib_1.__decorate([
+        autobind
+    ], HubHeader.prototype, "onSelectionChanged", null);
+    tslib_1.__decorate([
+        autobind
+    ], HubHeader.prototype, "onHeaderPickerChanged", null);
+    return HubHeader;
+}(BaseComponent));
+export { HubHeader };

Components/HubHeader/HubTextTile.js

@@ -1,1 +0,22 @@
-import*as tslib_1 from"tslib";import*as React from"react";import{BaseComponent,css}from"office-ui-fabric-react/lib/Utilities";import{DynamicText}from"../../Dynamic";var HubTextTile=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.text,s=e.secondaryText,i=css("vss-HubTextTile vss-HubTile");return React.createElement("div",{className:i},React.createElement(DynamicText,{text:t,className:css("vss-HubTextTile--primaryText",{"vss-HubTextTile--primaryTextOnly":!this.props.secondaryText})}),React.createElement(DynamicText,{text:s,className:"vss-HubTextTile--secondaryText"}))},t}(BaseComponent);export{HubTextTile};
+import * as tslib_1 from "tslib";
+import * as React from "react";
+import { BaseComponent, css } from "office-ui-fabric-react/lib/Utilities";
+import { DynamicText } from '../../Dynamic';
+/**
+ * Hub tile comprised of text, and an optional icon
+ */
+var HubTextTile = /** @class */ (function (_super) {
+    tslib_1.__extends(HubTextTile, _super);
+    function HubTextTile() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    HubTextTile.prototype.render = function () {
+        var _a = this.props, text = _a.text, secondaryText = _a.secondaryText;
+        var className = css("vss-HubTextTile vss-HubTile");
+        return (React.createElement("div", { className: className },
+            React.createElement(DynamicText, { text: text, className: css('vss-HubTextTile--primaryText', { 'vss-HubTextTile--primaryTextOnly': !this.props.secondaryText }) }),
+            React.createElement(DynamicText, { text: secondaryText, className: 'vss-HubTextTile--secondaryText' })));
+    };
+    return HubTextTile;
+}(BaseComponent));
+export { HubTextTile };

Components/HubHeader/HubTileRegion.js

@@ -1,1 +0,29 @@
-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};
+import * as tslib_1 from "tslib";
+import * as React from "react";
+import { BaseComponent, css } from "office-ui-fabric-react/lib/Utilities";
+import "./HubTileRegion.css";
+/**
+ * Component that contains hub tiles to be displayed in the PivotBar.
+ */
+var HubTileRegion = /** @class */ (function (_super) {
+    tslib_1.__extends(HubTileRegion, _super);
+    function HubTileRegion() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    HubTileRegion.prototype.render = function () {
+        var className = css('vss-HubTileRegion');
+        var propsChildren = React.Children.toArray(this.props.children);
+        var children = React.Children.map(propsChildren || [], function (item, index) {
+            var originalChild = item;
+            var originalProps = originalChild.props;
+            var originalClassName = originalProps && originalProps.className;
+            var clonedElementProps = tslib_1.__assign({}, originalProps, { className: originalClassName
+                    ? originalClassName + ' vss-HubTile'
+                    : 'vss-HubTile' });
+            return React.cloneElement(item, clonedElementProps);
+        });
+        return (React.createElement("div", { className: className }, children));
+    };
+    return HubTileRegion;
+}(BaseComponent));
+export { HubTileRegion };

Components/HubHeader/HubTitle.js

@@ -1,1 +0,32 @@
-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};
+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";
+/**
+ * Component that generates a standard VSTS page header.
+ */
+var HubTitle = /** @class */ (function (_super) {
+    tslib_1.__extends(HubTitle, _super);
+    function HubTitle(props) {
+        return _super.call(this, props) || this;
+    }
+    HubTitle.prototype.getIcon = function () {
+        if (this.props.iconProps) {
+            var iconProps = tslib_1.__assign({}, this.props.iconProps, { className: css(this.props.iconProps.className, "vss-HubTitle-titleIcon") });
+            return React.createElement(VssIcon, tslib_1.__assign({}, iconProps));
+        }
+        return null;
+    };
+    HubTitle.prototype.getTitleText = function () {
+        return (React.createElement("div", { className: "vss-HubTitle--titleText" }, this.props.titleText));
+    };
+    HubTitle.prototype.render = function () {
+        var className = css("vss-HubTitle");
+        return (React.createElement("h1", { className: className, onClick: this.props.onClick },
+            this.getIcon(),
+            this.getTitleText()));
+    };
+    return HubTitle;
+}(BaseComponent));
+export { HubTitle };

Components/HubHeader/index.d.ts

@@ -5,4 +5,4 @@ export * from './HubHeader';
 export * from './HubTileRegion';
-export * from './HubHeader.Props';
-export * from './HubBreadcrumb.Props';
-export * from './HubTextTile.Props';
+
+
+

Components/HubHeader/index.js

@@ -1,1 +0,8 @@
-export*from"./HubHeader";export*from"./HubBreadcrumb";export*from"./HubTextTile";export*from"./HubTileRegion";
+export * from './HubHeader';
+export * from './HubBreadcrumb';
+export * from './HubTextTile';
+export * from './HubTileRegion';
+// @NOTE: Explicit export list due to typescript compiler bug 18644 where a require is generated for export * when const enum's are present
+//export { IHubBreadcrumbProps, IHubPickerDropdownProps, IHubBreadcrumbItem, IHubBreadcrumbItemInternal, IHeaderItemPicker, IHubBreadcrumb, IHubBreadcrumbPickList } from './HubBreadcrumb.Props';
+//export { IHubHeaderProps } from './HubHeader.Props';
+//export { IHubTextTileProps } from './HubTextTile.Props'; 

Components/IconToggleButton/IconToggleButton.js

@@ -1,1 +0,31 @@
-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};
+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";
+/**
+ * Allows user to set 2 different icons for a button and switch between them on clicks
+ */
+var IconToggleButton = /** @class */ (function (_super) {
+    tslib_1.__extends(IconToggleButton, _super);
+    function IconToggleButton() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    IconToggleButton.prototype.render = function () {
+        var _a = this.props, className = _a.className, isToggledOn = _a.isToggledOn, onToggle = _a.onToggle, toggledOffIconProps = _a.toggledOffIconProps, toggledOnIconProps = _a.toggledOnIconProps;
+        var iconClassName = css("vss-IconToggleButton", "icon-toggle-button", className, { "is-toggled-on": isToggledOn });
+        return (React.createElement(IconButton, { className: iconClassName, onClick: this._onClick, iconProps: VssIcon.getIconProps(isToggledOn ? toggledOnIconProps : toggledOffIconProps) }));
+    };
+    IconToggleButton.prototype._onClick = function (ev) {
+        ev.preventDefault();
+        if (this.props.onToggle) {
+            this.props.onToggle(!this.props.isToggledOn);
+        }
+    };
+    tslib_1.__decorate([
+        autobind
+    ], IconToggleButton.prototype, "_onClick", null);
+    return IconToggleButton;
+}(BaseComponent));
+export { IconToggleButton };

Components/IconToggleButton/index.d.ts

 export * from './IconToggleButton';
-export * from './IconToggleButton.Props';
+

Components/IconToggleButton/index.js

@@ -1,1 +0,3 @@
-export*from"./IconToggleButton";
+export * from './IconToggleButton';
+// @NOTE: Explicit export list due to typescript compiler bug 18644 where a require is generated for export * when const enum's are present
+//export { IIconToggleButtonProps } from './IconToggleButton.Props'; 

Components/ItemIndicator/index.js

@@ -1,1 +0,4 @@
-export*from"./Item";export*from"./ItemIndicator";
+export * from "./Item";
+export * from "./ItemIndicator";
+// @NOTE: Explicit export list due to typescript compiler bug 18644 where a require is generated for export * when const enum's are present
+//export { IItemIndicatorProps, IItemIndicatorSetProps } from "./ItemIndicator.Props"; 

Components/ItemIndicator/Item.js

@@ -1,1 +0,31 @@
-import*as tslib_1 from"tslib";import{Observable}from"../../Utilities/Observable";export var ITEM_CHANGE_EVENT="item-changed";var Item=function(t){function e(e){var r=t.call(this)||this;return r._currentState=tslib_1.__assign({},e.initialState),r}return tslib_1.__extends(e,t),e.prototype.getState=function(){return this._currentState},e.prototype.setState=function(t,e){void 0===e&&(e=!1),this._currentState=t,e||this.notify(t,ITEM_CHANGE_EVENT)},e}(Observable);export{Item};
+import * as tslib_1 from "tslib";
+import { Observable } from '../../Utilities/Observable';
+export var ITEM_CHANGE_EVENT = 'item-changed';
+var Item = /** @class */ (function (_super) {
+    tslib_1.__extends(Item, _super);
+    function Item(props) {
+        var _this = _super.call(this) || this;
+        _this._currentState = tslib_1.__assign({}, props.initialState);
+        return _this;
+    }
+    /**
+     * Gets the current state of the item.
+     */
+    Item.prototype.getState = function () {
+        return this._currentState;
+    };
+    /**
+     * Sets a new state for the item.
+     * @param state New item state.
+     * @param supressChangeEvent If true, don't invoke changed callback at this time.
+     */
+    Item.prototype.setState = function (state, supressChangeEvent) {
+        if (supressChangeEvent === void 0) { supressChangeEvent = false; }
+        this._currentState = state;
+        if (!supressChangeEvent) {
+            this.notify(state, ITEM_CHANGE_EVENT);
+        }
+    };
+    return Item;
+}(Observable));
+export { Item };

Components/ItemIndicator/ItemIndicator.js

@@ -1,1 +0,129 @@
-import*as tslib_1 from"tslib";import*as React from"react";import{IconButton}from"office-ui-fabric-react/lib/Button";import{TooltipHost,TooltipOverflowMode}from"office-ui-fabric-react/lib/Tooltip";import{autobind,BaseComponent,css}from"office-ui-fabric-react/lib/Utilities";import{VssIcon}from"../../VssIcon";import"./ItemIndicator.css";var ItemIndicator=function(t){function e(e){var o=t.call(this,e)||this;return o.state=o._buildNewState(o.props),o}return tslib_1.__extends(e,t),e.prototype.componentWillReceiveProps=function(t){this.setState(this._buildNewState(t))},e.prototype.componentDidMount=function(){this.props.item&&this.props.item.subscribe(this._onItemChanged)},e.prototype.componentDidUpdate=function(t,e){this.props.item!==t.item&&(this.props.item&&this.props.item.subscribe(this._onItemChanged),t.item&&t.item.unsubscribe(this._onItemChanged))},e.prototype.componentWillUnmount=function(){this.props.item&&this.props.item.unsubscribe(this._onItemChanged)},e.prototype._buildNewState=function(t){if(t.item){var e=t.item.getState();return{title:e.title,iconProps:e.iconProps}}return{title:t.title,iconProps:t.iconProps}},e.prototype.render=function(){var t,e,o=this.state,i=o.title,n=o.iconProps,s=this.props,r=s.onClick,c=s.className;return n?(i=i||n.title,e=React.createElement(VssIcon,tslib_1.__assign({},tslib_1.__assign({},n,{title:void 0,className:css(n.className,c,{"vss-ItemIndicator":!r&&!i})})))):(t=TooltipOverflowMode.Parent,e=React.createElement("span",{className:css("vss-ItemIndicator--textIndicator",c,{"vss-ItemIndicator":!r&&!i})},i)),r&&(e=React.createElement(IconButton,{className:css({"vss-ItemIndicator":!i}),onClick:this._onClick,ariaLabel:i},e)),i&&(e=React.createElement(TooltipHost,{hostClassName:"vss-ItemIndicator",content:i,overflowMode:t},e)),e},e.prototype._onClick=function(t){var e=this.props,o=e.item,i=e.onClick;i&&(i(t,o),t.preventDefault())},e.prototype._onItemChanged=function(t){this.setState({title:t.title,iconProps:t.iconProps})},tslib_1.__decorate([autobind],e.prototype,"_onClick",null),tslib_1.__decorate([autobind],e.prototype,"_onItemChanged",null),e}(BaseComponent);export{ItemIndicator};var ItemIndicatorSet=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return tslib_1.__extends(e,t),e.prototype.render=function(){var t=this.props.indicators;if(t&&t.length){var e=t.map(function(t,e){return React.createElement(ItemIndicator,tslib_1.__assign({},t,{key:"ItemIndicator$"+e}))});return React.createElement("div",{className:"vss-IndicatorSet",onClick:this._onClick},e)}return null},e.prototype._onClick=function(t){!t.isDefaultPrevented()&&this.props.onClick&&this.props.onClick(t)},tslib_1.__decorate([autobind],e.prototype,"_onClick",null),e}(BaseComponent);export{ItemIndicatorSet};
+import * as tslib_1 from "tslib";
+import * as React from "react";
+import { IconButton } from "office-ui-fabric-react/lib/Button";
+import { TooltipHost, TooltipOverflowMode } from "office-ui-fabric-react/lib/Tooltip";
+import { autobind, BaseComponent, css } from "office-ui-fabric-react/lib/Utilities";
+import { VssIcon } from "../../VssIcon";
+import "./ItemIndicator.css";
+var ItemIndicator = /** @class */ (function (_super) {
+    tslib_1.__extends(ItemIndicator, _super);
+    function ItemIndicator(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = _this._buildNewState(_this.props);
+        return _this;
+    }
+    /**
+     * This gets executed when a container component re-renders ItemIndicator.
+     * @param nextProps New props.
+     */
+    ItemIndicator.prototype.componentWillReceiveProps = function (nextProps) {
+        this.setState(this._buildNewState(nextProps));
+    };
+    ItemIndicator.prototype.componentDidMount = function () {
+        if (this.props.item) {
+            this.props.item.subscribe(this._onItemChanged);
+        }
+    };
+    ItemIndicator.prototype.componentDidUpdate = function (prevProps, prevState) {
+        if (this.props.item !== prevProps.item) {
+            // If item changed, we need to subscribe for new item
+            if (this.props.item) {
+                this.props.item.subscribe(this._onItemChanged);
+            }
+            // We need to unsubscribe prev item
+            if (prevProps.item) {
+                prevProps.item.unsubscribe(this._onItemChanged);
+            }
+        }
+    };
+    ItemIndicator.prototype.componentWillUnmount = function () {
+        if (this.props.item) {
+            this.props.item.unsubscribe(this._onItemChanged);
+        }
+    };
+    /**
+     * Builds a new state using the specified props.
+     */
+    ItemIndicator.prototype._buildNewState = function (props) {
+        if (props.item) {
+            var itemState = props.item.getState();
+            return {
+                title: itemState.title,
+                iconProps: itemState.iconProps
+            };
+        }
+        else {
+            return {
+                title: props.title,
+                iconProps: props.iconProps
+            };
+        }
+    };
+    ItemIndicator.prototype.render = function () {
+        var _a = this.state, title = _a.title, iconProps = _a.iconProps;
+        var _b = this.props, onClick = _b.onClick, className = _b.className;
+        var overflowMode;
+        var indicator;
+        if (iconProps) {
+            title = title || iconProps.title;
+            // We need to remove title from props since it will be shown as a tooltip host below
+            indicator = React.createElement(VssIcon, tslib_1.__assign({}, tslib_1.__assign({}, iconProps, { title: undefined, className: css(iconProps.className, className, { 'vss-ItemIndicator': !onClick && !title }) })));
+        }
+        else {
+            overflowMode = TooltipOverflowMode.Parent;
+            indicator = React.createElement("span", { className: css('vss-ItemIndicator--textIndicator', className, { 'vss-ItemIndicator': !onClick && !title }) }, title);
+        }
+        if (onClick) {
+            indicator = React.createElement(IconButton, { className: css({ 'vss-ItemIndicator': !title }), onClick: this._onClick, ariaLabel: title }, indicator);
+        }
+        if (title) {
+            indicator = React.createElement(TooltipHost, { hostClassName: 'vss-ItemIndicator', content: title, overflowMode: overflowMode }, indicator);
+        }
+        return indicator;
+    };
+    ItemIndicator.prototype._onClick = function (ev) {
+        var _a = this.props, item = _a.item, onClick = _a.onClick;
+        if (onClick) {
+            onClick(ev, item);
+            ev.preventDefault();
+        }
+    };
+    ItemIndicator.prototype._onItemChanged = function (state) {
+        this.setState({
+            title: state.title,
+            iconProps: state.iconProps
+        });
+    };
+    tslib_1.__decorate([
+        autobind
+    ], ItemIndicator.prototype, "_onClick", null);
+    tslib_1.__decorate([
+        autobind
+    ], ItemIndicator.prototype, "_onItemChanged", null);
+    return ItemIndicator;
+}(BaseComponent));
+export { ItemIndicator };
+var ItemIndicatorSet = /** @class */ (function (_super) {
+    tslib_1.__extends(ItemIndicatorSet, _super);
+    function ItemIndicatorSet() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    ItemIndicatorSet.prototype.render = function () {
+        var indicators = this.props.indicators;
+        if (indicators && indicators.length) {
+            var list = indicators.map(function (indicatorProps, index) { return React.createElement(ItemIndicator, tslib_1.__assign({}, indicatorProps, { key: "ItemIndicator$" + index })); });
+            return (React.createElement("div", { className: 'vss-IndicatorSet', onClick: this._onClick }, list));
+        }
+        return null;
+    };
+    ItemIndicatorSet.prototype._onClick = function (ev) {
+        if (!ev.isDefaultPrevented() && this.props.onClick) {
+            this.props.onClick(ev);
+        }
+    };
+    tslib_1.__decorate([
+        autobind
+    ], ItemIndicatorSet.prototype, "_onClick", null);
+    return ItemIndicatorSet;
+}(BaseComponent));
+export { ItemIndicatorSet };

Components/PickList/index.d.ts

@@ -5,2 +5,2 @@ export * from './ItemPicker';
 export * from './PickListFilterBarItem';
-export * from './PickList.Props';
+

Components/PickList/index.js

@@ -1,1 +0,6 @@
-export*from"./ItemPicker";export*from"./PickList";export*from"./PickListDropdown";export*from"./PickListFilterBarItem";
+export * from './ItemPicker';
+export * from './PickList';
+export * from './PickListDropdown';
+export * from './PickListFilterBarItem';
+// @NOTE: Explicit export list due to typescript compiler bug 18644 where a require is generated for export * when const enum's are present
+//export { IPickListItem, IPickListIndicator, IPickListAction, IPickListGroup, IPickListOperator, IPickListSelection, IPickListProps, IPickList, IPickListDropdownProps, IPickListDropdown, IItemPickerProvider, IItemPickerProps, IItemPickerComponent } from './PickList.Props'; 

Components/PickList/ItemPicker.js

@@ -1,1 +0,35 @@
-import*as tslib_1 from"tslib";import*as React from"react";import{BaseComponent,css}from"office-ui-fabric-react/lib/Utilities";import{PickListDropdown}from"./PickListDropdown";export var PICKER_CHANGE_EVENT="picker-changed";var ItemPickerComponent=function(e){function t(t){var i=e.call(this,t)||this;return i.updateDelegate=function(){return i.forceUpdate()},i.state={},i}return tslib_1.__extends(t,e),t.prototype.render=function(){var e=this,t=this.props,i=t.className,o=t.itemPicker,s=t.minWidth,r=t.pickListClassName,n=t.tabIndex;return React.createElement(PickListDropdown,{componentRef:function(t){return e.pickListDropdown=t},className:css("item-picker-dropdown",i),getListItem:o.getListItem,getPickListItems:function(){return o.getItems()},onSelectionChanged:o.onSelectedItemChanged,selectedItems:o.selectedItem?[o.selectedItem]:void 0,indicators:o.dropdownIndicators,pickListClassName:r,selectedItemIndicators:o.selectedItemIndicators,groups:o.groups,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:s,tabIndex:n,shouldVirtualize:function(e){return(e||[]).length>50}})},t.prototype.componentDidMount=function(){this._events.on(this.props.itemPicker,PICKER_CHANGE_EVENT,this.updateDelegate)},t.prototype.componentWillUnmount=function(){this._events.off(this.props.itemPicker,PICKER_CHANGE_EVENT,this.updateDelegate)},t.prototype.componentWillReceiveProps=function(e){this.props.itemPicker!==e.itemPicker&&(this._events.off(this.props.itemPicker,PICKER_CHANGE_EVENT,this.updateDelegate),this._events.on(e.itemPicker,PICKER_CHANGE_EVENT,this.updateDelegate))},t}(BaseComponent);export{ItemPickerComponent};
+import * as tslib_1 from "tslib";
+import * as React from "react";
+import { BaseComponent, css } from "office-ui-fabric-react/lib/Utilities";
+import { PickListDropdown } from "./PickListDropdown";
+export var PICKER_CHANGE_EVENT = 'picker-changed';
+var ItemPickerComponent = /** @class */ (function (_super) {
+    tslib_1.__extends(ItemPickerComponent, _super);
+    function ItemPickerComponent(props) {
+        var _this = _super.call(this, props) || this;
+        _this.updateDelegate = function () { return _this.forceUpdate(); };
+        _this.state = {};
+        return _this;
+    }
+    ItemPickerComponent.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, className = _a.className, itemPicker = _a.itemPicker, minWidth = _a.minWidth, pickListClassName = _a.pickListClassName, tabIndex = _a.tabIndex;
+        return React.createElement(PickListDropdown, { componentRef: function (pickListDropdown) { return (_this.pickListDropdown = pickListDropdown); }, className: css("item-picker-dropdown", className), getListItem: itemPicker.getListItem, getPickListItems: function () { return itemPicker.getItems(); }, onSelectionChanged: itemPicker.onSelectedItemChanged, selectedItems: itemPicker.selectedItem ? [itemPicker.selectedItem] : undefined, indicators: itemPicker.dropdownIndicators, pickListClassName: pickListClassName, selectedItemIndicators: itemPicker.selectedItemIndicators, groups: itemPicker.groups, isSearchable: itemPicker.isSearchable, searchTextPlaceholder: itemPicker.searchTextPlaceholder, searchResultsGroupName: itemPicker.searchResultsGroupName, searchNoResultsText: itemPicker.searchNoResultsText, onSearch: itemPicker.onSearch, getActions: function (items) { return itemPicker.actions; }, noItemsText: itemPicker.noItemsText, width: minWidth, tabIndex: tabIndex, shouldVirtualize: function (items) {
+                return (items || []).length > 50;
+            } });
+    };
+    ItemPickerComponent.prototype.componentDidMount = function () {
+        this._events.on(this.props.itemPicker, PICKER_CHANGE_EVENT, this.updateDelegate);
+    };
+    ItemPickerComponent.prototype.componentWillUnmount = function () {
+        this._events.off(this.props.itemPicker, PICKER_CHANGE_EVENT, this.updateDelegate);
+    };
+    ItemPickerComponent.prototype.componentWillReceiveProps = function (nextProps) {
+        if (this.props.itemPicker !== nextProps.itemPicker) {
+            this._events.off(this.props.itemPicker, PICKER_CHANGE_EVENT, this.updateDelegate);
+            this._events.on(nextProps.itemPicker, PICKER_CHANGE_EVENT, this.updateDelegate);
+        }
+    };
+    return ItemPickerComponent;
+}(BaseComponent));
+export { ItemPickerComponent };

Components/PickList/PickList.js

@@ -1,1 +0,845 @@
-import*as tslib_1 from"tslib";import*as React from"react";import*as ReactDOM from"react-dom";import{CommandButton}from"office-ui-fabric-react/lib/Button";import{ChoiceGroup}from"office-ui-fabric-react/lib/ChoiceGroup";import{Checkbox}from"office-ui-fabric-react/lib/Checkbox";import{FocusZone,FocusZoneDirection}from"office-ui-fabric-react/lib/FocusZone";import{List}from"office-ui-fabric-react/lib/List";import{SelectionMode}from"office-ui-fabric-react/lib/Selection";import{Spinner,SpinnerSize}from"office-ui-fabric-react/lib/Spinner";import{TextField}from"office-ui-fabric-react/lib/TextField";import{TooltipOverflowMode,TooltipHost}from"office-ui-fabric-react/lib/Tooltip";import{autobind,BaseComponent,css,getRTLSafeKeyCode,doesElementContainFocus}from"office-ui-fabric-react/lib/Utilities";import{ItemIndicatorSet}from"../../ItemIndicator";import{VssIcon}from"../../VssIcon";import*as VSSUIResources from"../../Resources/VSS.Resources.VSSUI";import"./PickList.css";var SELECT_ALL_ITEM_KEY="select-all-item",DEFAULT_MIN_ITEMS_NO_SEARCH=8,HIDE_LOADING_ITEMS_TIME_MS=250,SEARCH_TEXT_DEBOUNCE_TIME_MS=250,PickList=function(e){function t(t){var i=e.call(this,t)||this;return i._searchText="",i._maintainsOwnState=!1,i._itemDictionary={},t.initiallySelectedItems&&t.selectedItems&&console.warn("Please only provide ONE of initiallySelectedItems OR selectedItems as props"),t.initiallySelectedItems&&(i._maintainsOwnState=!0),i.state={isSearchInProgress:!1,initiallySelectedKeys:[],selectedKeys:[],filteredItems:[],searchResults:[],items:[],selectedOperatorKey:t.selectedOperatorKey,initiallySelectedOperatorKey:t.selectedOperatorKey},i._searchTextChangeDelegate=i._async.debounce(i._updateSearchText,SEARCH_TEXT_DEBOUNCE_TIME_MS),i._hideLoadingContent=!0,window.setTimeout(function(){i._hideLoadingContent=!1,i._loadingContentHidden&&i.forceUpdate()},HIDE_LOADING_ITEMS_TIME_MS),i}return tslib_1.__extends(t,e),t.prototype.clearSelection=function(){this._onSelectionChanged([],this.state.initiallySelectedOperatorKey)},t.prototype.reset=function(){this._onSelectionChanged(this.state.initiallySelectedKeys,this.state.initiallySelectedOperatorKey)},t.prototype.selectAll=function(){this.props.selectionMode===SelectionMode.multiple&&this._onSelectionChanged(this._getKeysFromItems(this.state.items,this.state.items))},t.prototype.focus=function(){return this._textField?(this._textField.focus(),!0):!!this._focusZone&&(this._firstRow?this._focusZone.focusElement(ReactDOM.findDOMNode(this._firstRow)):this._focusZone.focus())},t.prototype.forceUpdate=function(){this._isMounted&&this._rebuild(this.props)},t.prototype.componentWillMount=function(){this._rebuild(this.props)},t.prototype.componentDidMount=function(){this._isMounted=!0},t.prototype.componentWillUnmount=function(){this._isMounted=!1},t.prototype.componentWillReceiveProps=function(e){if(this._hasNewItems(e))if(this._arrayEquals(this.props.selectedItems,e.selectedItems))this.props.selectedOperatorKey!==e.selectedOperatorKey&&this.setState({selectedOperatorKey:e.selectedOperatorKey});else{var t=this._getKeysFromItems(e.selectedItems,this.state.items),i=this.state.filteredItems.map(function(e){return e.isSelected=t.some(function(t){return t===e.key}),e}),o=function(e){s._itemDictionary[e].isSelected=t.some(function(t){return t===e})},s=this;for(var n in this._itemDictionary)o(n);this.setState({filteredItems:i,selectedKeys:t,selectedOperatorKey:e.selectedOperatorKey})}else this._rebuild(e)},t.prototype.render=function(){var e,t=this.props,i=t.getActions,o=(t.selectionMode,t.searchTextPlaceholder),s=t.isSearchable,n=t.searchBoxAriaLabel,r=t.onSearch,a=t.className,c=t.noItemsText,l=t.operators,p=t.minItemsForSearchBox,d=void 0===p?DEFAULT_MIN_ITEMS_NO_SEARCH:p,h=t.shouldVirtualize,u=this.state,m=u.filteredItems,_=(u.isSearchInProgress,m?m.slice():[]),f=0===_.length&&this._loadingContentHidden,y=(e=f?[]:i&&i(_))&&e.length>0&&e.map(function(e,t){return React.createElement(PickListAction,{key:String(t),action:e})}),S=this._searchText?{iconName:"Clear",className:"clear-filter-input",tabIndex:0,onClick:this._onClearInputClick,onKeyPress:this._onClearInputKeyPress,role:"button",ariaLabel:VSSUIResources.FilterTextItemClearLabel}:void 0,g=_&&_.length>1&&l&&React.createElement(PickListOperatorGroup,{operators:l,selectedOperatorKey:this.state.selectedOperatorKey,onChange:this._onOperatorChanged,ref:this._resolveRef("_operatorGroup")}),C=null,I="function"==typeof h?function(){return h(_)}:void 0;_.length?C=React.createElement("div",{className:"vss-PickList--items",role:"listbox"},React.createElement(List,{items:_,onRenderCell:this._onRenderCell,onPageAdded:this._onPageAdded,onShouldVirtualize:I})):c&&!f&&(C=React.createElement("div",{role:"alert","aria-live":"assertive",className:"vss-PickList--noItemsText"},c));var E=null;(C||y)&&(E=React.createElement(FocusZone,{ref:this._resolveRef("_focusZone"),isInnerZoneKeystroke:function(e){return e.which===getRTLSafeKeyCode(39)},direction:FocusZoneDirection.vertical,onActiveElementChanged:this._onActiveElementChanged,isCircularNavigation:!0},C,y&&React.createElement("div",{className:"vss-PickList--actions"},y)));var b={};return this.props.width&&(_.length?b.width=this.props.width+"px":b.minWidth=this.props.width+"px"),React.createElement("div",{className:css("vss-PickList",a),style:b,onKeyDown:this._onKeyDown},s&&!f&&(this.state.items.length>=d||r)&&React.createElement(TextField,{className:"vss-PickList--searchTextField",ref:this._resolveRef("_textField"),placeholder:o,value:this._searchText,ariaLabel:n||o,onChanged:this._onSearchTextChanged,iconProps:S}),g,E)},t.prototype._rebuild=function(e){var t=this;this._isThenable(e.items)?(this._buildFromItems(e,[],!0),e.items.then(function(i){t.props.items===e.items&&t._buildFromItems(e,i,!1)})):this._buildFromItems(e,e.items||[],!1)},t.prototype._buildFromItems=function(e,t,i){var o=this.state.initiallySelectedKeys,s=this.state.selectedKeys;i||this._initialItemsLoaded||(e.initiallySelectedItems&&(s=o=this._getKeysFromItems(e.initiallySelectedItems,t)),this._initialItemsLoaded=!0),this._maintainsOwnState||(s=this._getKeysFromItems(e.selectedItems,t));var n=this.state,r=n.searchResults,a=n.isSearchInProgress,c=this._wrapItems(t,s),l=this._wrapItems(r,s,"search-results"),p=this._groupItems(c),d=this._groupItems(l,p),h=this._filterByText(this._searchText,d),u=this._buildGroupedItems(this._searchText,!!a,h,e.groups,s,i);this.setState({items:t,groupDictionary:p,initiallySelectedKeys:o,filteredItems:u,selectedKeys:s,itemsLoading:i})},t.prototype._onKeyDown=function(e){if(9===e.which){var t=this.props.onFocusLost;if(t){var i=e.shiftKey;(this._lastElementHasFocus()&&!i||this._firstElementHasFocus()&&i)&&t()}}},t.prototype._lastElementHasFocus=function(){return!this._focusZone||doesElementContainFocus(this._focusZone.refs.root)},t.prototype._firstElementHasFocus=function(){return this._textField?doesElementContainFocus(ReactDOM.findDOMNode(this._textField)):this._operatorGroup?doesElementContainFocus(ReactDOM.findDOMNode(this._operatorGroup)):!this._focusZone||doesElementContainFocus(this._focusZone.refs.root)},t.prototype._onSearchTextChanged=function(e){this._searchText=e,this._searchTextChangeDelegate(e)},t.prototype._onClearInputKeyPress=function(e){13!==e.which&&32!==e.which||(this._searchText="",this._updateSearchText())},t.prototype._onClearInputClick=function(){this._searchText="",this._updateSearchText()},t.prototype._onPageAdded=function(){this._isListRendered||(this._isListRendered=!0,this.focus())},t.prototype._updateSearchText=function(){var e=this,t=this.props,i=t.groups,o=t.onSearch,s=this.state,n=s.groupDictionary,r=s.itemsLoading,a=s.selectedKeys,c=this.state.isSearchInProgress,l=this._searchText;l&&o&&(c=!0,this._hideSearchingContentTimeout&&(window.clearTimeout(this._hideSearchingContentTimeout),this._hideSearchingContentTimeout=0),this._hideSearchingContent=!0,this._hideSearchingContentTimeout=window.setTimeout(function(){e._hideSearchingContent=!1,e._searchingContentHidden&&e.forceUpdate()},HIDE_LOADING_ITEMS_TIME_MS),this._getOnSearchPromise(l).then(function(t){if(l===e._searchText){c=!1;var o=e._wrapItems(t,a,"search-results"),s=e._groupItems(o,n),p=e._filterByText(l,s),d=e._buildGroupedItems(l,c,p,i,a,r);e.setState({isSearchInProgress:c,filteredItems:d,searchResults:t})}}));var p=this._filterByText(l,n),d=this._buildGroupedItems(l,!!c,p,i,a,r);this.setState({filteredItems:d,isSearchInProgress:c,searchResults:[]})},t.prototype._wrapItems=function(e,t,i){var o=this,s=this.props,n=s.getListItem;s.onSearch;return e.map(function(e){var s=n?n(e):{name:e,key:e};s.groupKey||(s.groupKey="undefined-key");var r=tslib_1.__assign({},s,{isSelected:t.some(function(e){return e===s.key}),data:e});return i&&(r.groupKey=i),o._itemDictionary[s.key]=r,r})},t.prototype._groupItems=function(e,t){var i={};if(t)for(var o in t)i[o]=t[o].slice();return e&&e.length&&e.forEach(function(e){var t=e.groupKey;i[t]||(i[t]=[]),i[t].push(e)}),i},t.prototype._filterByText=function(e,t){var i={};if(e){var o=e.toLowerCase();for(var s in t){var n=t[s].filter(function(e){return-1!==e.name.toLowerCase().indexOf(o)||e.isSeparator});i[s]=n}}else i=t;return i},t.prototype._buildGroupedItems=function(e,t,i,o,s,n){var r=this,a=[],c=this.props,l=c.itemsLoadingText,p=c.onSearch,d=c.searchResultsGroupName,h=c.searchResultsLoadingText,u=c.searchNoResultsText,m=c.selectionMode,_=c.showSelectAll,f=[{key:"undefined-key"}].concat(o||[]);p&&f.push({key:"search-results",name:d});var y=!1,S=!1;if(this._loadingContentHidden=!1,this._searchingContentHidden=!1,f.forEach(function(o){var s=o.key,c=i[s];c&&c.length?(o&&(y||o.name)&&a.push({isSeparator:!0,isGroupHeader:!0,name:o.name,key:"group-name-"+o.key,data:void 0,isSelected:!1}),a=a.concat(c),y=!0):"search-results"===s?e&&e.length&&p&&(t&&r._hideSearchingContent?r._searchingContentHidden=!0:(t||!t&&u)&&((y||o.name)&&a.push({isSeparator:!0,isGroupHeader:!0,name:o.name||"",key:"group-name-"+o.key,isSelected:!1}),t?a.push({isSeparator:!0,isLoadingIndicator:!0,name:h||VSSUIResources.Searching,key:"search-loading-"+o.key,data:void 0,isSelected:!1}):a.push({isSeparator:!0,isMessage:!0,name:u,key:"search-no-results-"+o.key,data:void 0,isSelected:!1}),y=!0)):(n&&"undefined-key"===o.key||o.isLoading)&&(r._hideLoadingContent?r._loadingContentHidden=!0:S||(S=!0,(y||o.name)&&a.push({isSeparator:!0,isGroupHeader:!0,name:o.name,key:"group-name-"+o.key,data:void 0,isSelected:!1}),a.push({isSeparator:!0,isLoadingIndicator:!0,name:o.loadingMessage||l||VSSUIResources.Loading,key:"items-loading-"+o.key,data:void 0,isSelected:!1}),y=!0))}),m===SelectionMode.multiple&&_&&a.length>1){var g=-1!==s.indexOf(SELECT_ALL_ITEM_KEY),C={key:SELECT_ALL_ITEM_KEY,name:VSSUIResources.PickListSelectAllActionText,isSelected:!!g};a.splice(0,0,C),this._itemDictionary[SELECT_ALL_ITEM_KEY]=C}return a},t.prototype._getOnSearchPromise=function(e){var t=this.props,i=(t.items,t.onSearch),o=i?i(e,this.state.items):[];return Promise.resolve(o)},t.prototype._onSelectionChanged=function(e,t){var i=this,o=!1;if(this._isMounted){var s=this.props.onSelectionChanged,n=t||this.state.selectedOperatorKey;if(s){o=!0===s({selectedItems:e.filter(function(e){return e!==SELECT_ALL_ITEM_KEY&&!!i._itemDictionary[e]}).map(function(e){return i._itemDictionary[e].data}),selectedOperatorKey:n})}if(this._maintainsOwnState){this.state.filteredItems.map(function(t){return t.isSelected=e.some(function(e){return e===t.key}),t});this.setState({filteredItems:this.state.filteredItems.slice(),selectedKeys:e,selectedOperatorKey:n})}}return o},t.prototype._onOperatorChanged=function(e){this._onSelectionChanged(this.state.selectedKeys,e)},t.prototype._onRenderCell=function(e,t){var i=this.props.selectionMode;return e.isSeparator?e.isGroupHeader?e.name?React.createElement("div",{className:"vss-PickList--groupHeader"},e.name):React.createElement("div",{className:"vss-PickList--groupSeparator"}):e.isLoadingIndicator?React.createElement("div",{className:"vss-PickList--loading"},React.createElement(Spinner,{size:SpinnerSize.medium,label:e.name})):e.isMessage?React.createElement("div",{className:"vss-PickList--message"},e.name):React.createElement("div",null,e.name):i===SelectionMode.multiple?this._onRenderCellMultipleSelection(e,t):this._onRenderCellSingleSelection(e,t)},t.prototype._onRenderCellSingleSelection=function(e,t){var i=this,o=this._getIndicators(e,this.props.indicators);return React.createElement(PickListRow,{ariaLabel:e.ariaLabel||e.name,ref:function(e){0===t&&(i._firstRow=e)},dataSelectionKey:e.key,isSelected:e.isSelected,setSize:this.state.filteredItems.length,itemIndex:t,href:e.href,onKeyboardEnter:function(){return i._onSelectionChanged([e.key])}},React.createElement(PickListSelectableElement,{item:e,indicators:o,onSelectionChanged:function(){return i._onSelectionChanged([e.key])}}))},t.prototype._onRenderCellMultipleSelection=function(e,t){var i=this,o=this._getIndicators(e,this.props.indicators);return React.createElement(PickListRow,{ariaLabel:e.ariaLabel||e.name,ref:function(e){0===t&&(i._firstRow=e)},dataSelectionKey:e.key,spaceBarTriggersClick:!0,isSelected:e.isSelected,setSize:this.state.filteredItems.length,itemIndex:t,onKeyboardEnter:function(){return i._onMultipleSelectionChanged(e.key,!e.isSelected)}},React.createElement(PickListCheckboxElement,{item:e,indicators:o,onSelectionChanged:function(t){return i._onMultipleSelectionChanged(e.key,t)}}))},t.prototype._onMultipleSelectionChanged=function(e,t){var i=[];return e===SELECT_ALL_ITEM_KEY?i=t?this._getKeysFromItems(this.state.items,this.state.items):[]:(i=this.state.selectedKeys.filter(function(e){return e!==SELECT_ALL_ITEM_KEY}),t?i.push(e):i.splice(i.indexOf(e),1),i.length===this.state.items.length&&(i=[SELECT_ALL_ITEM_KEY].concat(i))),this._onSelectionChanged(i)},t.prototype._onActiveElementChanged=function(e){if(this.props.selectionMode===SelectionMode.single&&this.props.selectOnFocus){var t=e.getAttribute("data-selection-key");t&&this._onSelectionChanged([t])}},t.prototype._getIndicators=function(e,t){return t?t.map(function(t){return t.getItemIndicator(e.data)}):[]},t.prototype._getKeysFromItems=function(e,t){var i=this;if(e){var o=[];return o=this.props.getListItem?e.map(function(e){return i.props.getListItem(e).key}):e,t&&o.length===t.length&&(o=[SELECT_ALL_ITEM_KEY].concat(o)),o}return[]},t.prototype._hasNewItems=function(e){return this._isThenable(e.items)?this.props.items===e.items:this._arrayEquals(this.state.items,e.items)},t.prototype._isThenable=function(e){return e&&"function"==typeof e.then},t.prototype._arrayEquals=function(e,t){if(e&&t){if(e.length!==t.length)return!1;for(var i=0;i<e.length;i++)if(e[i]!==t[i])return!1;return!0}return e===t},tslib_1.__decorate([autobind],t.prototype,"_onKeyDown",null),tslib_1.__decorate([autobind],t.prototype,"_onSearchTextChanged",null),tslib_1.__decorate([autobind],t.prototype,"_onClearInputKeyPress",null),tslib_1.__decorate([autobind],t.prototype,"_onClearInputClick",null),tslib_1.__decorate([autobind],t.prototype,"_onPageAdded",null),tslib_1.__decorate([autobind],t.prototype,"_updateSearchText",null),tslib_1.__decorate([autobind],t.prototype,"_onSelectionChanged",null),tslib_1.__decorate([autobind],t.prototype,"_onOperatorChanged",null),tslib_1.__decorate([autobind],t.prototype,"_onRenderCell",null),tslib_1.__decorate([autobind],t.prototype,"_onRenderCellSingleSelection",null),tslib_1.__decorate([autobind],t.prototype,"_onRenderCellMultipleSelection",null),tslib_1.__decorate([autobind],t.prototype,"_onActiveElementChanged",null),t}(BaseComponent);export{PickList};var PickListRow=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return tslib_1.__extends(t,e),t.prototype.render=function(){return React.createElement("div",{role:"option","aria-selected":this.props.isSelected,"aria-label":this.props.ariaLabel,"aria-setsize":this.props.setSize,"aria-posinset":this.props.itemIndex+1,className:"vss-PickList--row",ref:this._resolveRef("_rowDiv"),"data-is-focusable":!0,onKeyDown:this._onKeyDown,"data-selection-key":this.props.dataSelectionKey},React.createElement(FocusZone,{direction:FocusZoneDirection.horizontal},this.props.children))},t.prototype._onKeyDown=function(e){if(13===e.which||32===e.which&&this.props.spaceBarTriggersClick){e.target===this._rowDiv&&(this.props.href?e.ctrlKey||e.shiftKey?window.open(this.props.href,"_blank","noopener"):this.props.onKeyboardEnter()||(window.location.href=this.props.href):this.props.onKeyboardEnter())}},tslib_1.__decorate([autobind],t.prototype,"_onKeyDown",null),t}(BaseComponent),PickListSelectableElement=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return tslib_1.__extends(t,e),t.prototype.render=function(){var e=this.props,t=e.item,i=e.indicators,o={};return t.iconProps&&t.iconProps.styles&&(o.icon=t.iconProps.styles.root),React.createElement("div",{className:css("vss-PickList--element","vss-PickList--selectableElement",{"is-selected":t.isSelected})},React.createElement(CommandButton,{className:"vss-PickList--selectableElementButton",iconProps:t.iconProps?VssIcon.getIconProps(t.iconProps):void 0,styles:o,href:t.href,tabIndex:-1,"data-is-focusable":!1,onClick:this._onClick},React.createElement("div",{className:"vss-PickList--selectableElementButton-textContainer"},React.createElement(TooltipHost,{content:t.name,overflowMode:TooltipOverflowMode.Parent},React.createElement("span",{className:"vss-PickList--selectableElementButton-text"},t.name)))),React.createElement(ItemIndicatorSet,{indicators:i,onClick:this._onClick}))},t.prototype._onClick=function(e){var t=this.props,i=t.item,o=t.onSelectionChanged;o&&(i.href&&(e.ctrlKey||e.shiftKey||1===e.button||2===e.button)||o()&&e.preventDefault())},tslib_1.__decorate([autobind],t.prototype,"_onClick",null),t}(BaseComponent),PickListCheckboxElement=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return tslib_1.__extends(t,e),t.prototype.render=function(){var e=this.props,t=e.item,i=e.indicators,o=t.iconProps?React.createElement(VssIcon,tslib_1.__assign({className:"vss-PickList--multiSelectIcon"},t.iconProps)):null,s=React.createElement("div",{className:"vss-PickList--multiSelectTextContainer"},React.createElement(TooltipHost,{content:t.name,overflowMode:TooltipOverflowMode.Parent},React.createElement("span",{className:"vss-PickList--multiSelectText"},t.name))),n=React.createElement(ItemIndicatorSet,{indicators:i});return React.createElement("div",{className:css("vss-PickList--element","vss-PickList--multiSelectableElement"),onClick:this._onClick},React.createElement(Checkbox,{className:"vss-PickList--checkbox",checked:t.isSelected,onChange:this._onChange}),o,s,n)},t.prototype._onChange=function(e,t){this.props.onSelectionChanged(!this.props.item.isSelected)},t.prototype._onClick=function(e){e.defaultPrevented||(this.props.onSelectionChanged(!this.props.item.isSelected),e.preventDefault())},tslib_1.__decorate([autobind],t.prototype,"_onChange",null),tslib_1.__decorate([autobind],t.prototype,"_onClick",null),t}(BaseComponent),PickListAction=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return tslib_1.__extends(t,e),t.prototype.render=function(){var e=this.props.action,t=e.href,i=e.iconProps,o=e.name,s=e.disabled;return React.createElement("div",{className:"vss-PickList--action"},React.createElement(CommandButton,{className:"vss-PickList--selectableElementButton",onClick:this._onClick,disabled:s,href:t,tabIndex:-1,styles:{textContainer:{textAlign:"left"}},iconProps:i?VssIcon.getIconProps(i):void 0},o))},t.prototype._onClick=function(e){this.props.action.onClick(e)},tslib_1.__decorate([autobind],t.prototype,"_onClick",null),t}(BaseComponent),PickListOperatorGroup=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return tslib_1.__extends(t,e),t.prototype.render=function(){var e=this.props,t=e.operators,i=(e.onChange,e.selectedOperatorKey),o=t.map(function(e){return{text:e.name,key:e.key}});return React.createElement(ChoiceGroup,{selectedKey:i,options:o,onChange:this._onChange,ref:this._resolveRef("_choiceGroup")})},t.prototype._onChange=function(e,t){this.props.onChange(t.key)},tslib_1.__decorate([autobind],t.prototype,"_onChange",null),t}(BaseComponent);
+import * as tslib_1 from "tslib";
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { CommandButton } from 'office-ui-fabric-react/lib/Button';
+import { ChoiceGroup } from 'office-ui-fabric-react/lib/ChoiceGroup';
+import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
+import { FocusZone, FocusZoneDirection } from 'office-ui-fabric-react/lib/FocusZone';
+import { List } from 'office-ui-fabric-react/lib/List';
+import { SelectionMode } from 'office-ui-fabric-react/lib/Selection';
+import { Spinner, SpinnerSize } from 'office-ui-fabric-react/lib/Spinner';
+import { TextField } from 'office-ui-fabric-react/lib/TextField';
+import { TooltipOverflowMode, TooltipHost } from 'office-ui-fabric-react/lib/Tooltip';
+import { autobind, BaseComponent, css, getRTLSafeKeyCode, doesElementContainFocus } from 'office-ui-fabric-react/lib/Utilities';
+import { ItemIndicatorSet } from '../../ItemIndicator';
+import { VssIcon } from '../../VssIcon';
+import * as VSSUIResources from '../../Resources/VSS.Resources.VSSUI';
+import "./PickList.css";
+var SELECT_ALL_ITEM_KEY = 'select-all-item';
+var DEFAULT_MIN_ITEMS_NO_SEARCH = 8;
+var HIDE_LOADING_ITEMS_TIME_MS = 250;
+var SEARCH_TEXT_DEBOUNCE_TIME_MS = 250;
+var PickList = /** @class */ (function (_super) {
+    tslib_1.__extends(PickList, _super);
+    function PickList(props) {
+        var _this = _super.call(this, props) || this;
+        _this._searchText = '';
+        _this._maintainsOwnState = false;
+        _this._itemDictionary = {};
+        if (props.initiallySelectedItems && props.selectedItems) {
+            console.warn("Please only provide ONE of initiallySelectedItems OR selectedItems as props");
+        }
+        if (props.initiallySelectedItems) {
+            _this._maintainsOwnState = true;
+        }
+        _this.state = {
+            isSearchInProgress: false,
+            initiallySelectedKeys: [],
+            selectedKeys: [],
+            filteredItems: [],
+            searchResults: [],
+            items: [],
+            selectedOperatorKey: props.selectedOperatorKey,
+            initiallySelectedOperatorKey: props.selectedOperatorKey
+        };
+        _this._searchTextChangeDelegate = _this._async.debounce(_this._updateSearchText, SEARCH_TEXT_DEBOUNCE_TIME_MS);
+        /**
+         * Set _hideLoadingContent to true to indicate to us to not render items/groups that are still in the loading state.
+         * This state is set for a short amount of time on initial render to avoid flickering
+         * of loading indicators when the items can be loaded quickly.
+         */
+        _this._hideLoadingContent = true;
+        window.setTimeout(function () {
+            _this._hideLoadingContent = false;
+            if (_this._loadingContentHidden) {
+                _this.forceUpdate();
+            }
+        }, HIDE_LOADING_ITEMS_TIME_MS);
+        return _this;
+    }
+    PickList.prototype.clearSelection = function () {
+        this._onSelectionChanged([], this.state.initiallySelectedOperatorKey);
+    };
+    PickList.prototype.reset = function () {
+        this._onSelectionChanged(this.state.initiallySelectedKeys, this.state.initiallySelectedOperatorKey);
+    };
+    PickList.prototype.selectAll = function () {
+        if (this.props.selectionMode === SelectionMode.multiple) {
+            // This is currently only supported for cases where all of the items are passed
+            // directly to the pickList and not provided through the onSearch method. We still
+            // need to handle the case where the pickList is showing items retrieved via search.
+            this._onSelectionChanged(this._getKeysFromItems(this.state.items, this.state.items));
+        }
+    };
+    PickList.prototype.focus = function () {
+        if (this._textField) {
+            this._textField.focus();
+            return true;
+        }
+        else if (this._focusZone) {
+            if (this._firstRow) {
+                return this._focusZone.focusElement(ReactDOM.findDOMNode(this._firstRow));
+            }
+            else {
+                return this._focusZone.focus();
+            }
+        }
+        //No items so return false
+        return false;
+    };
+    PickList.prototype.forceUpdate = function () {
+        if (this._isMounted) {
+            this._rebuild(this.props);
+        }
+    };
+    PickList.prototype.componentWillMount = function () {
+        this._rebuild(this.props);
+    };
+    PickList.prototype.componentDidMount = function () {
+        this._isMounted = true;
+    };
+    PickList.prototype.componentWillUnmount = function () {
+        this._isMounted = false;
+    };
+    PickList.prototype.componentWillReceiveProps = function (newProps) {
+        if (!this._hasNewItems(newProps)) {
+            this._rebuild(newProps);
+        }
+        else if (!this._arrayEquals(this.props.selectedItems, newProps.selectedItems)) {
+            var newSelectedKeys_1 = this._getKeysFromItems(newProps.selectedItems, this.state.items);
+            var filteredItems = this.state.filteredItems.map(function (item) {
+                item.isSelected = newSelectedKeys_1.some(function (key) { return key === item.key; });
+                return item;
+            });
+            var _loop_1 = function (itemKey) {
+                var item = this_1._itemDictionary[itemKey];
+                item.isSelected = newSelectedKeys_1.some(function (key) { return key === itemKey; });
+            };
+            var this_1 = this;
+            for (var itemKey in this._itemDictionary) {
+                _loop_1(itemKey);
+            }
+            this.setState({
+                filteredItems: filteredItems,
+                selectedKeys: newSelectedKeys_1,
+                selectedOperatorKey: newProps.selectedOperatorKey
+            });
+        }
+        else if (this.props.selectedOperatorKey !== newProps.selectedOperatorKey) {
+            this.setState({
+                selectedOperatorKey: newProps.selectedOperatorKey
+            });
+        }
+    };
+    PickList.prototype.render = function () {
+        var _a = this.props, getActions = _a.getActions, selectionMode = _a.selectionMode, searchTextPlaceholder = _a.searchTextPlaceholder, isSearchable = _a.isSearchable, searchBoxAriaLabel = _a.searchBoxAriaLabel, onSearch = _a.onSearch, className = _a.className, noItemsText = _a.noItemsText, operators = _a.operators, _b = _a.minItemsForSearchBox, minItemsForSearchBox = _b === void 0 ? DEFAULT_MIN_ITEMS_NO_SEARCH : _b, shouldVirtualize = _a.shouldVirtualize;
+        var _c = this.state, filteredItems = _c.filteredItems, isSearchInProgress = _c.isSearchInProgress;
+        var items = filteredItems ? filteredItems.slice() : [];
+        var hidingAllInitialItems = items.length === 0 && this._loadingContentHidden;
+        var actions;
+        if (hidingAllInitialItems) {
+            actions = [];
+        }
+        else {
+            actions = getActions && getActions(items);
+        }
+        var actionList = actions &&
+            actions.length > 0 &&
+            actions.map(function (action, index) {
+                return React.createElement(PickListAction, { key: String(index), action: action });
+            });
+        var iconProps = this._searchText ? {
+            iconName: 'Clear',
+            className: 'clear-filter-input',
+            tabIndex: 0,
+            onClick: this._onClearInputClick,
+            onKeyPress: this._onClearInputKeyPress,
+            role: "button",
+            ariaLabel: VSSUIResources.FilterTextItemClearLabel
+        } : undefined;
+        var operatorGroup = items && items.length > 1 && operators &&
+            React.createElement(PickListOperatorGroup, { operators: operators, selectedOperatorKey: this.state.selectedOperatorKey, onChange: this._onOperatorChanged, ref: this._resolveRef('_operatorGroup') });
+        var itemsList = null;
+        var onShouldVirtualize = typeof shouldVirtualize === "function" ? function () { return shouldVirtualize(items); } : undefined;
+        if (items.length) {
+            itemsList =
+                React.createElement("div", { className: 'vss-PickList--items', role: 'listbox' },
+                    React.createElement(List, { items: items, onRenderCell: this._onRenderCell, onPageAdded: this._onPageAdded, onShouldVirtualize: onShouldVirtualize }));
+        }
+        else if (noItemsText && !hidingAllInitialItems) {
+            itemsList = React.createElement("div", { role: "alert", "aria-live": "assertive", className: 'vss-PickList--noItemsText' }, noItemsText);
+        }
+        var itemsAndActionsArea = null;
+        if (itemsList || actionList) {
+            itemsAndActionsArea =
+                React.createElement(FocusZone, { ref: this._resolveRef('_focusZone'), isInnerZoneKeystroke: function (ev) { return (ev.which === getRTLSafeKeyCode(39 /* right */)); }, direction: FocusZoneDirection.vertical, onActiveElementChanged: this._onActiveElementChanged, isCircularNavigation: true },
+                    itemsList,
+                    actionList &&
+                        React.createElement("div", { className: "vss-PickList--actions" }, actionList));
+        }
+        var style = {};
+        if (this.props.width) {
+            if (items.length) {
+                //If we have items, we don't want the length of the items list
+                //to be wider than the containing element, so use a fixed width
+                style.width = this.props.width + "px";
+            }
+            else {
+                //If we don't have items, we're fine with the width of the no
+                //items text growing beyond the containing element, so use a min-width
+                style.minWidth = this.props.width + "px";
+            }
+        }
+        return React.createElement("div", { className: css('vss-PickList', className), style: style, onKeyDown: this._onKeyDown },
+            isSearchable && !hidingAllInitialItems && (this.state.items.length >= minItemsForSearchBox || onSearch) &&
+                React.createElement(TextField, { className: 'vss-PickList--searchTextField', ref: this._resolveRef('_textField'), placeholder: searchTextPlaceholder, value: this._searchText, ariaLabel: searchBoxAriaLabel || searchTextPlaceholder, onChanged: this._onSearchTextChanged, iconProps: iconProps }),
+            operatorGroup,
+            itemsAndActionsArea);
+    };
+    PickList.prototype._rebuild = function (props) {
+        var _this = this;
+        if (this._isThenable(props.items)) {
+            this._buildFromItems(props, [], true);
+            props.items.then(function (resolvedItems) {
+                // Ensure that the items promise prop is still current
+                if (_this.props.items === props.items) {
+                    _this._buildFromItems(props, resolvedItems, false);
+                }
+            });
+        }
+        else {
+            this._buildFromItems(props, props.items || [], false);
+        }
+    };
+    PickList.prototype._buildFromItems = function (props, items, loading) {
+        var initiallySelectedKeys = this.state.initiallySelectedKeys;
+        var selectedKeys = this.state.selectedKeys;
+        if (!loading && !this._initialItemsLoaded) {
+            if (props.initiallySelectedItems) {
+                initiallySelectedKeys = this._getKeysFromItems(props.initiallySelectedItems, items);
+                selectedKeys = initiallySelectedKeys;
+            }
+            this._initialItemsLoaded = true;
+        }
+        if (!this._maintainsOwnState) {
+            selectedKeys = this._getKeysFromItems(props.selectedItems, items);
+        }
+        var _a = this.state, searchResults = _a.searchResults, isSearchInProgress = _a.isSearchInProgress;
+        var wrappedItems = this._wrapItems(items, selectedKeys);
+        var searchWrappedItems = this._wrapItems(searchResults, selectedKeys, 'search-results');
+        var groupDictionary = this._groupItems(wrappedItems);
+        var groupDictionaryWithSearchResults = this._groupItems(searchWrappedItems, groupDictionary);
+        var filteredGroupDictionary = this._filterByText(this._searchText, groupDictionaryWithSearchResults);
+        var groupedItems = this._buildGroupedItems(this._searchText, !!isSearchInProgress, filteredGroupDictionary, props.groups, selectedKeys, loading);
+        this.setState({ items: items, groupDictionary: groupDictionary, initiallySelectedKeys: initiallySelectedKeys, filteredItems: groupedItems, selectedKeys: selectedKeys, itemsLoading: loading });
+    };
+    PickList.prototype._onKeyDown = function (ev) {
+        if (ev.which === 9 /* tab */) {
+            var onFocusLost = this.props.onFocusLost;
+            if (onFocusLost) {
+                var shiftKey = ev.shiftKey;
+                if ((this._lastElementHasFocus() && !shiftKey) ||
+                    (this._firstElementHasFocus() && shiftKey)) {
+                    onFocusLost();
+                }
+            }
+        }
+    };
+    PickList.prototype._lastElementHasFocus = function () {
+        return !this._focusZone || doesElementContainFocus(this._focusZone.refs.root);
+    };
+    PickList.prototype._firstElementHasFocus = function () {
+        if (this._textField) {
+            return doesElementContainFocus(ReactDOM.findDOMNode(this._textField));
+        }
+        else if (this._operatorGroup) {
+            return doesElementContainFocus(ReactDOM.findDOMNode(this._operatorGroup));
+        }
+        return !this._focusZone || doesElementContainFocus(this._focusZone.refs.root);
+    };
+    PickList.prototype._onSearchTextChanged = function (searchText) {
+        this._searchText = searchText;
+        this._searchTextChangeDelegate(searchText);
+    };
+    PickList.prototype._onClearInputKeyPress = function (ev) {
+        if (ev.which === 13 /* enter */ || ev.which === 32 /* space */) {
+            this._searchText = '';
+            this._updateSearchText();
+        }
+    };
+    PickList.prototype._onClearInputClick = function () {
+        this._searchText = '';
+        this._updateSearchText();
+    };
+    PickList.prototype._onPageAdded = function () {
+        // The List elements are not rendered when we focus the FocusZone, so the call to focus()
+        // when the callout is positioned instead focuses the first action, rather than the first element.
+        // To work around this, the first time a page is added, we want to make an additional call to 
+        // focus().
+        if (!this._isListRendered) {
+            this._isListRendered = true;
+            this.focus();
+        }
+    };
+    PickList.prototype._updateSearchText = function () {
+        var _this = this;
+        var _a = this.props, groups = _a.groups, onSearch = _a.onSearch;
+        var _b = this.state, groupDictionary = _b.groupDictionary, itemsLoading = _b.itemsLoading, selectedKeys = _b.selectedKeys;
+        var isSearchInProgress = this.state.isSearchInProgress;
+        var searchText = this._searchText;
+        if (searchText) {
+            if (onSearch) {
+                isSearchInProgress = true;
+                /**
+                 * Set _hideSearchingContent to true to indicate to us to not render search loading indicator.
+                 * This state is set for a short amount of time on initial render to avoid flickering
+                 * of the progress indicator when the search can be completed quickly.
+                 */
+                if (this._hideSearchingContentTimeout) {
+                    window.clearTimeout(this._hideSearchingContentTimeout);
+                    this._hideSearchingContentTimeout = 0;
+                }
+                this._hideSearchingContent = true;
+                this._hideSearchingContentTimeout = window.setTimeout(function () {
+                    _this._hideSearchingContent = false;
+                    if (_this._searchingContentHidden) {
+                        _this.forceUpdate();
+                    }
+                }, HIDE_LOADING_ITEMS_TIME_MS);
+                this._getOnSearchPromise(searchText).then(function (searchResults) {
+                    // Ignore search results from previous searches. Only update results if the search string is still current
+                    if (searchText === _this._searchText) {
+                        isSearchInProgress = false;
+                        var searchPickListItems = _this._wrapItems(searchResults, selectedKeys, 'search-results');
+                        var groupDictionaryWithSearchResults = _this._groupItems(searchPickListItems, groupDictionary);
+                        var filteredGroupDictionary_1 = _this._filterByText(searchText, groupDictionaryWithSearchResults);
+                        var groupedItems_1 = _this._buildGroupedItems(searchText, isSearchInProgress, filteredGroupDictionary_1, groups, selectedKeys, itemsLoading);
+                        _this.setState({ isSearchInProgress: isSearchInProgress, filteredItems: groupedItems_1, searchResults: searchResults });
+                    }
+                });
+            }
+        }
+        var filteredGroupDictionary = this._filterByText(searchText, groupDictionary);
+        var groupedItems = this._buildGroupedItems(searchText, !!isSearchInProgress, filteredGroupDictionary, groups, selectedKeys, itemsLoading);
+        this.setState({ filteredItems: groupedItems, isSearchInProgress: isSearchInProgress, searchResults: [] });
+    };
+    PickList.prototype._wrapItems = function (items, selectedKeys, overrideGroupKey) {
+        var _this = this;
+        var _a = this.props, getListItem = _a.getListItem, onSearch = _a.onSearch;
+        var pickListItems = items.map(function (item) {
+            var pickListItem = getListItem ? getListItem(item) : {
+                name: item,
+                key: item
+            };
+            if (!pickListItem.groupKey) {
+                pickListItem.groupKey = 'undefined-key';
+            }
+            var pickListItemInternal = tslib_1.__assign({}, pickListItem, { isSelected: selectedKeys.some(function (key) { return key === pickListItem.key; }), data: item });
+            if (overrideGroupKey) {
+                pickListItemInternal.groupKey = overrideGroupKey;
+            }
+            _this._itemDictionary[pickListItem.key] = pickListItemInternal;
+            return pickListItemInternal;
+        });
+        return pickListItems;
+    };
+    PickList.prototype._groupItems = function (items, initialGroupDictionary) {
+        var groupDictionary = {};
+        if (initialGroupDictionary) {
+            for (var key in initialGroupDictionary) {
+                groupDictionary[key] = initialGroupDictionary[key].slice();
+            }
+        }
+        if (items && items.length) {
+            items.forEach(function (item) {
+                var groupKey = item.groupKey;
+                if (!groupDictionary[groupKey]) {
+                    groupDictionary[groupKey] = [];
+                }
+                groupDictionary[groupKey].push(item);
+            });
+        }
+        return groupDictionary;
+    };
+    PickList.prototype._filterByText = function (searchText, groupDictionary) {
+        var filteredGroupDictionary = {};
+        if (searchText) {
+            var lowerCaseSearchText_1 = searchText.toLowerCase();
+            for (var key in groupDictionary) {
+                var groupItems = groupDictionary[key];
+                var filteredGroupItems = groupItems.filter(function (item) {
+                    return item.name.toLowerCase().indexOf(lowerCaseSearchText_1) !== -1 || item.isSeparator;
+                });
+                filteredGroupDictionary[key] = filteredGroupItems;
+            }
+        }
+        else {
+            filteredGroupDictionary = groupDictionary;
+        }
+        return filteredGroupDictionary;
+    };
+    PickList.prototype._buildGroupedItems = function (searchText, isSearchInProgress, groupDictionary, groups, selectedKeys, itemsLoading) {
+        var _this = this;
+        var groupedItems = [];
+        var _a = this.props, itemsLoadingText = _a.itemsLoadingText, onSearch = _a.onSearch, searchResultsGroupName = _a.searchResultsGroupName, searchResultsLoadingText = _a.searchResultsLoadingText, searchNoResultsText = _a.searchNoResultsText, selectionMode = _a.selectionMode, showSelectAll = _a.showSelectAll;
+        var allGroups = [{ key: 'undefined-key' }].concat(groups || []);
+        if (onSearch) {
+            allGroups.push({
+                key: 'search-results',
+                name: searchResultsGroupName
+            });
+        }
+        var needsSeparator = false;
+        var groupLoadingIndicatorAdded = false;
+        this._loadingContentHidden = false;
+        this._searchingContentHidden = false;
+        allGroups.forEach(function (group) {
+            var groupKey = group.key;
+            var itemsForGroup = groupDictionary[groupKey];
+            if (itemsForGroup && itemsForGroup.length) {
+                if (group && (needsSeparator || group.name)) {
+                    groupedItems.push({
+                        isSeparator: true,
+                        isGroupHeader: true,
+                        name: group.name,
+                        key: 'group-name-' + group.key,
+                        data: undefined,
+                        isSelected: false
+                    });
+                }
+                groupedItems = groupedItems.concat(itemsForGroup);
+                needsSeparator = true;
+            }
+            else if (groupKey === 'search-results') {
+                if (searchText && searchText.length && onSearch) {
+                    if (isSearchInProgress && _this._hideSearchingContent) {
+                        _this._searchingContentHidden = true;
+                    }
+                    else if (isSearchInProgress || (!isSearchInProgress && searchNoResultsText)) {
+                        if (needsSeparator || group.name) {
+                            groupedItems.push({
+                                isSeparator: true,
+                                isGroupHeader: true,
+                                name: group.name || "",
+                                key: 'group-name-' + group.key,
+                                isSelected: false
+                            });
+                        }
+                        if (isSearchInProgress) {
+                            groupedItems.push({
+                                isSeparator: true,
+                                isLoadingIndicator: true,
+                                name: searchResultsLoadingText || VSSUIResources.Searching,
+                                key: 'search-loading-' + group.key,
+                                data: undefined,
+                                isSelected: false
+                            });
+                        }
+                        else {
+                            groupedItems.push({
+                                isSeparator: true,
+                                isMessage: true,
+                                name: searchNoResultsText,
+                                key: 'search-no-results-' + group.key,
+                                data: undefined,
+                                isSelected: false
+                            });
+                        }
+                        needsSeparator = true;
+                    }
+                }
+            }
+            else if ((itemsLoading && group.key === 'undefined-key') || group.isLoading) {
+                if (_this._hideLoadingContent) {
+                    _this._loadingContentHidden = true;
+                }
+                else if (!groupLoadingIndicatorAdded) {
+                    // Only add loading spinner for the first loading group rather than n spinners.
+                    groupLoadingIndicatorAdded = true;
+                    if (needsSeparator || group.name) {
+                        groupedItems.push({
+                            isSeparator: true,
+                            isGroupHeader: true,
+                            name: group.name,
+                            key: 'group-name-' + group.key,
+                            data: undefined,
+                            isSelected: false
+                        });
+                    }
+                    groupedItems.push({
+                        isSeparator: true,
+                        isLoadingIndicator: true,
+                        name: group.loadingMessage || itemsLoadingText || VSSUIResources.Loading,
+                        key: 'items-loading-' + group.key,
+                        data: undefined,
+                        isSelected: false
+                    });
+                    needsSeparator = true;
+                }
+            }
+        });
+        if (selectionMode === SelectionMode.multiple && showSelectAll && groupedItems.length > 1) {
+            var isSelected = selectedKeys.indexOf(SELECT_ALL_ITEM_KEY) !== -1;
+            var selectAllItem = {
+                key: SELECT_ALL_ITEM_KEY,
+                name: VSSUIResources.PickListSelectAllActionText,
+                isSelected: !!isSelected
+            };
+            groupedItems.splice(0, 0, selectAllItem);
+            this._itemDictionary[SELECT_ALL_ITEM_KEY] = selectAllItem;
+        }
+        return groupedItems;
+    };
+    PickList.prototype._getOnSearchPromise = function (searchText) {
+        var _a = this.props, items = _a.items, onSearch = _a.onSearch;
+        var searchItems = onSearch ? onSearch(searchText, this.state.items) : [];
+        return Promise.resolve(searchItems);
+    };
+    PickList.prototype._onSelectionChanged = function (newSelectedKeys, selectedOperatorKey) {
+        var _this = this;
+        var preventDefault = false;
+        if (this._isMounted) {
+            var onSelectionChanged = this.props.onSelectionChanged;
+            var newSelectedOperatorKey = selectedOperatorKey || this.state.selectedOperatorKey;
+            if (onSelectionChanged) {
+                var selectedItems = newSelectedKeys.filter(function (key) { return (key !== SELECT_ALL_ITEM_KEY && !!_this._itemDictionary[key]); }).map(function (key) { return _this._itemDictionary[key].data; });
+                preventDefault = onSelectionChanged({ selectedItems: selectedItems, selectedOperatorKey: newSelectedOperatorKey }) === true;
+            }
+            if (this._maintainsOwnState) {
+                var filteredItems = this.state.filteredItems.map(function (item) {
+                    item.isSelected = newSelectedKeys.some(function (key) { return key === item.key; });
+                    return item;
+                });
+                this.setState({
+                    filteredItems: this.state.filteredItems.slice(),
+                    selectedKeys: newSelectedKeys,
+                    selectedOperatorKey: newSelectedOperatorKey
+                });
+            }
+        }
+        return preventDefault;
+    };
+    PickList.prototype._onOperatorChanged = function (newSelectedOperatorKey) {
+        this._onSelectionChanged(this.state.selectedKeys, newSelectedOperatorKey);
+    };
+    PickList.prototype._onRenderCell = function (item, index) {
+        var selectionMode = this.props.selectionMode;
+        if (item.isSeparator) {
+            if (item.isGroupHeader) {
+                if (item.name) {
+                    return React.createElement("div", { className: "vss-PickList--groupHeader" }, item.name);
+                }
+                else {
+                    return React.createElement("div", { className: "vss-PickList--groupSeparator" });
+                }
+            }
+            else if (item.isLoadingIndicator) {
+                return React.createElement("div", { className: "vss-PickList--loading" },
+                    React.createElement(Spinner, { size: SpinnerSize.medium, label: item.name }));
+            }
+            else if (item.isMessage) {
+                return React.createElement("div", { className: "vss-PickList--message" }, item.name);
+            }
+            else {
+                return React.createElement("div", null, item.name);
+            }
+        }
+        if (selectionMode === SelectionMode.multiple) {
+            return this._onRenderCellMultipleSelection(item, index);
+        }
+        return this._onRenderCellSingleSelection(item, index);
+    };
+    PickList.prototype._onRenderCellSingleSelection = function (item, index) {
+        var _this = this;
+        var indicators = this._getIndicators(item, this.props.indicators);
+        return React.createElement(PickListRow, { ariaLabel: item.ariaLabel || item.name, ref: function (row) { if (index === 0) {
+                _this._firstRow = row;
+            } }, dataSelectionKey: item.key, isSelected: item.isSelected, setSize: this.state.filteredItems.length, itemIndex: index, href: item.href, onKeyboardEnter: function () {
+                return _this._onSelectionChanged([item.key]);
+            } },
+            React.createElement(PickListSelectableElement, { item: item, indicators: indicators, onSelectionChanged: function () {
+                    return _this._onSelectionChanged([item.key]);
+                } }));
+    };
+    PickList.prototype._onRenderCellMultipleSelection = function (item, index) {
+        var _this = this;
+        var indicators = this._getIndicators(item, this.props.indicators);
+        return React.createElement(PickListRow, { ariaLabel: item.ariaLabel || item.name, ref: function (row) { if (index === 0) {
+                _this._firstRow = row;
+            } }, dataSelectionKey: item.key, spaceBarTriggersClick: true, isSelected: item.isSelected, setSize: this.state.filteredItems.length, itemIndex: index, onKeyboardEnter: function () {
+                return _this._onMultipleSelectionChanged(item.key, !item.isSelected);
+            } },
+            React.createElement(PickListCheckboxElement, { item: item, indicators: indicators, onSelectionChanged: function (isSelected) {
+                    return _this._onMultipleSelectionChanged(item.key, isSelected);
+                } }));
+    };
+    PickList.prototype._onMultipleSelectionChanged = function (key, isSelected) {
+        var newSelectedKeys = [];
+        if (key === SELECT_ALL_ITEM_KEY) {
+            if (isSelected) {
+                newSelectedKeys = this._getKeysFromItems(this.state.items, this.state.items);
+            }
+            else {
+                newSelectedKeys = [];
+            }
+        }
+        else {
+            newSelectedKeys = this.state.selectedKeys.filter(function (key) { return key !== SELECT_ALL_ITEM_KEY; });
+            if (isSelected) {
+                newSelectedKeys.push(key);
+            }
+            else {
+                newSelectedKeys.splice(newSelectedKeys.indexOf(key), 1);
+            }
+            if (newSelectedKeys.length === this.state.items.length) {
+                newSelectedKeys = [SELECT_ALL_ITEM_KEY].concat(newSelectedKeys);
+            }
+        }
+        return this._onSelectionChanged(newSelectedKeys);
+    };
+    PickList.prototype._onActiveElementChanged = function (element) {
+        if (this.props.selectionMode === SelectionMode.single && this.props.selectOnFocus) {
+            var key = element.getAttribute('data-selection-key');
+            if (key) {
+                this._onSelectionChanged([key]);
+            }
+        }
+    };
+    PickList.prototype._getIndicators = function (pickListItem, indicators) {
+        return indicators ? indicators.map(function (indicator) {
+            return indicator.getItemIndicator(pickListItem.data);
+        }) : [];
+    };
+    PickList.prototype._getKeysFromItems = function (items, allItems) {
+        var _this = this;
+        if (items) {
+            var selectedKeys = [];
+            if (this.props.getListItem) {
+                selectedKeys = items.map(function (item) {
+                    return _this.props.getListItem(item).key;
+                });
+            }
+            else {
+                selectedKeys = items;
+            }
+            if (allItems && selectedKeys.length === allItems.length) {
+                selectedKeys = [SELECT_ALL_ITEM_KEY].concat(selectedKeys);
+            }
+            return selectedKeys;
+        }
+        return [];
+    };
+    PickList.prototype._hasNewItems = function (newProps) {
+        if (this._isThenable(newProps.items)) {
+            return this.props.items === newProps.items;
+        }
+        else {
+            return this._arrayEquals(this.state.items, newProps.items);
+        }
+    };
+    PickList.prototype._isThenable = function (obj) {
+        return obj && typeof obj["then"] === "function";
+    };
+    PickList.prototype._arrayEquals = function (array1, array2) {
+        if (array1 && array2) {
+            if (array1.length !== array2.length) {
+                return false;
+            }
+            for (var index = 0; index < array1.length; index++) {
+                if (array1[index] !== array2[index]) {
+                    return false;
+                }
+            }
+            return true;
+        }
+        else {
+            return array1 === array2;
+        }
+    };
+    tslib_1.__decorate([
+        autobind
+    ], PickList.prototype, "_onKeyDown", null);
+    tslib_1.__decorate([
+        autobind
+    ], PickList.prototype, "_onSearchTextChanged", null);
+    tslib_1.__decorate([
+        autobind
+    ], PickList.prototype, "_onClearInputKeyPress", null);
+    tslib_1.__decorate([
+        autobind
+    ], PickList.prototype, "_onClearInputClick", null);
+    tslib_1.__decorate([
+        autobind
+    ], PickList.prototype, "_onPageAdded", null);
+    tslib_1.__decorate([
+        autobind
+    ], PickList.prototype, "_updateSearchText", null);
+    tslib_1.__decorate([
+        autobind
+    ], PickList.prototype, "_onSelectionChanged", null);
+    tslib_1.__decorate([
+        autobind
+    ], PickList.prototype, "_onOperatorChanged", null);
+    tslib_1.__decorate([
+        autobind
+    ], PickList.prototype, "_onRenderCell", null);
+    tslib_1.__decorate([
+        autobind
+    ], PickList.prototype, "_onRenderCellSingleSelection", null);
+    tslib_1.__decorate([
+        autobind
+    ], PickList.prototype, "_onRenderCellMultipleSelection", null);
+    tslib_1.__decorate([
+        autobind
+    ], PickList.prototype, "_onActiveElementChanged", null);
+    return PickList;
+}(BaseComponent));
+export { PickList };
+var PickListRow = /** @class */ (function (_super) {
+    tslib_1.__extends(PickListRow, _super);
+    function PickListRow() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    PickListRow.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": true, onKeyDown: this._onKeyDown, "data-selection-key": this.props.dataSelectionKey },
+            React.createElement(FocusZone, { direction: FocusZoneDirection.horizontal }, this.props.children));
+    };
+    PickListRow.prototype._onKeyDown = function (ev) {
+        if (ev.which === 13 /* enter */ ||
+            (ev.which === 32 /* space */ && this.props.spaceBarTriggersClick)) {
+            var target = ev.target;
+            if (target === this._rowDiv) {
+                if (this.props.href) {
+                    if (ev.ctrlKey || ev.shiftKey) {
+                        // Shift-enter or Ctrl-enter. Open in new window/tab
+                        window.open(this.props.href, "_blank", "noopener");
+                    }
+                    else {
+                        // Regular click - invoke handler
+                        if (!this.props.onKeyboardEnter()) {
+                            // Not handled, perform navigation
+                            window.location.href = this.props.href;
+                        }
+                    }
+                }
+                else {
+                    // No hyperlink. Always invoke the change handler.
+                    this.props.onKeyboardEnter();
+                }
+            }
+        }
+    };
+    tslib_1.__decorate([
+        autobind
+    ], PickListRow.prototype, "_onKeyDown", null);
+    return PickListRow;
+}(BaseComponent));
+var PickListSelectableElement = /** @class */ (function (_super) {
+    tslib_1.__extends(PickListSelectableElement, _super);
+    function PickListSelectableElement() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    PickListSelectableElement.prototype.render = function () {
+        var _a = this.props, item = _a.item, indicators = _a.indicators;
+        var buttonStyles = {};
+        // Command button expects icon props on the button styling, pull from iconProps passed in
+        if (item.iconProps && item.iconProps.styles) {
+            buttonStyles.icon = item.iconProps.styles.root;
+        }
+        return React.createElement("div", { className: css('vss-PickList--element', 'vss-PickList--selectableElement', { 'is-selected': item.isSelected }) },
+            React.createElement(CommandButton, { className: 'vss-PickList--selectableElementButton', iconProps: item.iconProps ? VssIcon.getIconProps(item.iconProps) : undefined, styles: buttonStyles, href: item.href, tabIndex: -1, "data-is-focusable": false, onClick: this._onClick },
+                React.createElement("div", { className: 'vss-PickList--selectableElementButton-textContainer' },
+                    React.createElement(TooltipHost, { content: item.name, overflowMode: TooltipOverflowMode.Parent },
+                        React.createElement("span", { className: 'vss-PickList--selectableElementButton-text' }, item.name)))),
+            React.createElement(ItemIndicatorSet, { indicators: indicators, onClick: this._onClick }));
+    };
+    PickListSelectableElement.prototype._onClick = function (ev) {
+        var _a = this.props, item = _a.item, onSelectionChanged = _a.onSelectionChanged;
+        if (onSelectionChanged) {
+            if (item.href && (ev.ctrlKey || ev.shiftKey || ev.button === 1 || ev.button === 2)) {
+                // No-op. This is an item that has a hyperlink AND this is a
+                // ctrl/shift-click event or middle/right-click event. Let the browser handle this
+            }
+            else {
+                if (onSelectionChanged()) {
+                    ev.preventDefault();
+                }
+            }
+        }
+    };
+    tslib_1.__decorate([
+        autobind
+    ], PickListSelectableElement.prototype, "_onClick", null);
+    return PickListSelectableElement;
+}(BaseComponent));
+var PickListCheckboxElement = /** @class */ (function (_super) {
+    tslib_1.__extends(PickListCheckboxElement, _super);
+    function PickListCheckboxElement() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    PickListCheckboxElement.prototype.render = function () {
+        var _a = this.props, item = _a.item, indicators = _a.indicators;
+        var icon = item.iconProps ? React.createElement(VssIcon, tslib_1.__assign({ className: 'vss-PickList--multiSelectIcon' }, item.iconProps)) : null;
+        var label = React.createElement("div", { className: 'vss-PickList--multiSelectTextContainer' },
+            React.createElement(TooltipHost, { content: item.name, overflowMode: TooltipOverflowMode.Parent },
+                React.createElement("span", { className: 'vss-PickList--multiSelectText' }, item.name)));
+        var indicatorSet = React.createElement(ItemIndicatorSet, { indicators: indicators });
+        return React.createElement("div", { className: css('vss-PickList--element', 'vss-PickList--multiSelectableElement'), onClick: this._onClick },
+            React.createElement(Checkbox, { className: 'vss-PickList--checkbox', checked: item.isSelected, onChange: this._onChange }),
+            icon,
+            label,
+            indicatorSet);
+    };
+    PickListCheckboxElement.prototype._onChange = function (ev, checked) {
+        this.props.onSelectionChanged(!this.props.item.isSelected);
+    };
+    PickListCheckboxElement.prototype._onClick = function (ev) {
+        if (!ev.defaultPrevented) {
+            this.props.onSelectionChanged(!this.props.item.isSelected);
+            ev.preventDefault();
+        }
+    };
+    tslib_1.__decorate([
+        autobind
+    ], PickListCheckboxElement.prototype, "_onChange", null);
+    tslib_1.__decorate([
+        autobind
+    ], PickListCheckboxElement.prototype, "_onClick", null);
+    return PickListCheckboxElement;
+}(BaseComponent));
+var PickListAction = /** @class */ (function (_super) {
+    tslib_1.__extends(PickListAction, _super);
+    function PickListAction() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    PickListAction.prototype.render = function () {
+        var _a = this.props.action, href = _a.href, iconProps = _a.iconProps, name = _a.name, disabled = _a.disabled;
+        return React.createElement("div", { className: 'vss-PickList--action' },
+            React.createElement(CommandButton, { className: 'vss-PickList--selectableElementButton', onClick: this._onClick, disabled: disabled, href: href, tabIndex: -1, styles: { textContainer: { textAlign: "left" } }, iconProps: iconProps ? VssIcon.getIconProps(iconProps) : undefined }, name));
+    };
+    PickListAction.prototype._onClick = function (ev) {
+        this.props.action.onClick(ev);
+    };
+    tslib_1.__decorate([
+        autobind
+    ], PickListAction.prototype, "_onClick", null);
+    return PickListAction;
+}(BaseComponent));
+var PickListOperatorGroup = /** @class */ (function (_super) {
+    tslib_1.__extends(PickListOperatorGroup, _super);
+    function PickListOperatorGroup() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    PickListOperatorGroup.prototype.render = function () {
+        var _a = this.props, operators = _a.operators, onChange = _a.onChange, selectedOperatorKey = _a.selectedOperatorKey;
+        var options = operators.map(function (operator) { return { text: operator.name, key: operator.key }; });
+        return React.createElement(ChoiceGroup, { selectedKey: selectedOperatorKey, options: options, onChange: this._onChange, ref: this._resolveRef('_choiceGroup') });
+    };
+    PickListOperatorGroup.prototype._onChange = function (ev, option) {
+        this.props.onChange(option.key);
+    };
+    tslib_1.__decorate([
+        autobind
+    ], PickListOperatorGroup.prototype, "_onChange", null);
+    return PickListOperatorGroup;
+}(BaseComponent));

Components/PickList/PickListDropdown.js

@@ -1,1 +0,181 @@
-import*as tslib_1 from"tslib";import*as React from"react";import{Callout}from"office-ui-fabric-react/lib/Callout";import{autobind,BaseComponent,css,format}from"office-ui-fabric-react/lib/Utilities";import{SelectionMode}from"office-ui-fabric-react/lib/Selection";import{TooltipOverflowMode,TooltipHost}from"office-ui-fabric-react/lib/Tooltip";import{PickList}from"../../Components/PickList/PickList";import{VssIcon}from"../../VssIcon";import{ItemIndicatorSet}from"../../ItemIndicator";import"./PickListDropdown.css";var DEFAULT_PICKLIST_WIDTH=200,DEFAULT_VIRTUALIZATION_LIMIT=50,PickListDropdown=function(t){function e(e){var i=t.call(this,e)||this;return i.state={isListOpen:!1,pickListWidth:DEFAULT_PICKLIST_WIDTH},i._shouldRefocus=!0,i}return tslib_1.__extends(e,t),e.prototype.focus=function(){this.state.isListOpen?this._pickList.focus():this._dropdownTitle.focus()},e.prototype.forceUpdate=function(){this._pickList&&this._pickList.forceUpdate()},e.prototype.render=function(){var t=this,e=this.props,i=e.className,o=e.pickListClassName,s=e.placeholder,n=e.selectedItems,c=e.getPickListItems,r=e.disabled,a=e.selectionMode,l=e.preventDismissOnScroll,p=void 0===l||l,d=e.tabIndex,h=this.state.isListOpen,_=n&&n.length>0,m=_?this._getTitleText():s,u=css("vss-PickListDropdown",i),f=css("vss-PickListDropdown--list",o),L=m;this.props.ariaLabelFormat&&(L=format(this.props.ariaLabelFormat,_?m:""));var I=void 0;return _&&(I=a===SelectionMode.multiple?{iconType:0,iconName:"CheckMark",className:"vss-PickListDropdown--title-checkIcon"}:this._getIconFromItem(n[0])),React.createElement("div",{className:u,ref:this._resolveRef("_dropdown")},React.createElement("div",{tabIndex:r?-1:d||0,ref:function(e){return t._dropdownTitle=e},onClick:this._onClick,onKeyDown:this._onKeyDown,className:css("vss-PickListDropdown--title",{"vss-PickListDropdown--placeholder":!_,disabled:r,focused:h}),"aria-expanded":h,"aria-label":L,"aria-disabled":!!r,role:"combobox"},I&&React.createElement(VssIcon,tslib_1.__assign({},I)),React.createElement("div",{className:"vss-PickListDropdown--title-textContainer"},React.createElement(TooltipHost,{content:m,overflowMode:TooltipOverflowMode.Parent},React.createElement("span",{className:"vss-PickListDropdown--title-text",role:"textbox","aria-readonly":!0},m))),React.createElement(VssIcon,{className:"vss-PickListDropdown--title-caretIcon",iconType:0,iconName:"ChevronDown"}),this.getIndicators()),h&&React.createElement(Callout,{onDismiss:this._onDismiss,onPositioned:this._onPositioned,target:this._dropdown,isBeakVisible:!1,preventDismissOnScroll:p,gapSpace:0,directionalHint:4},React.createElement(PickList,tslib_1.__assign({},this.props,{width:this.state.pickListWidth,className:f,onSelectionChanged:this._onSelectionChanged,componentRef:function(e){return t._pickList=e},items:c(),onFocusLost:this._onPickListFocusLost,shouldVirtualize:function(t){return(t||[]).length>DEFAULT_VIRTUALIZATION_LIMIT}}))))},e.prototype._getTitleText=function(){var t=this.props.selectedItems,e=this._getNameFromItem(t[0]);return t.length>1&&(e=e+" (+"+(t.length-1)+")"),e},e.prototype.getIndicators=function(){var t=this.props,e=t.selectedItems,i=t.selectedItemIndicators;return e&&e.length&&i&&i.length?React.createElement(ItemIndicatorSet,{indicators:i.map(function(t){return t.getItemIndicator(e[0])})}):null},e.prototype._onClick=function(){this.props.disabled||this._togglePickList(!this.state.isListOpen)},e.prototype._onKeyDown=function(t){this.props.disabled||(13===t.which||40===t.which?(this._togglePickList(!this.state.isListOpen),t.preventDefault()):27===t.which&&(this._togglePickList(!1),this._dropdownTitle.focus()))},e.prototype._onPickListFocusLost=function(){this._shouldRefocus=!0,this._togglePickList(!1)},e.prototype._onPositioned=function(){this._shouldRefocus&&(this._shouldRefocus=!1,this._pickList.focus())},e.prototype._onDismiss=function(t){this._shouldRefocus=!0,this._togglePickList(!1),27===t.which&&this._dropdownTitle.focus()},e.prototype._onSelectionChanged=function(t){var e=this.state.isListOpen&&this.props.selectionMode===SelectionMode.multiple;this._togglePickList(e),this.props.onSelectionChanged&&this.props.onSelectionChanged(t)},e.prototype._getNameFromItem=function(t){return this.props.getListItem?this.props.getListItem(t).name:t},e.prototype._getIconFromItem=function(t){if(this.props.getListItem)return this.props.getListItem(t).iconProps},e.prototype._togglePickList=function(t){var e=this._dropdownTitle?this._dropdownTitle.clientWidth:DEFAULT_PICKLIST_WIDTH;e-=2,this.setState({isListOpen:t,pickListWidth:e})},tslib_1.__decorate([autobind],e.prototype,"_onClick",null),tslib_1.__decorate([autobind],e.prototype,"_onKeyDown",null),tslib_1.__decorate([autobind],e.prototype,"_onPickListFocusLost",null),tslib_1.__decorate([autobind],e.prototype,"_onPositioned",null),tslib_1.__decorate([autobind],e.prototype,"_onDismiss",null),tslib_1.__decorate([autobind],e.prototype,"_onSelectionChanged",null),e}(BaseComponent);export{PickListDropdown};
+import * as tslib_1 from "tslib";
+import * as React from 'react';
+import { Callout } from "office-ui-fabric-react/lib/Callout";
+import { autobind, BaseComponent, css, format } from 'office-ui-fabric-react/lib/Utilities';
+import { SelectionMode } from "office-ui-fabric-react/lib/Selection";
+import { TooltipOverflowMode, TooltipHost } from 'office-ui-fabric-react/lib/Tooltip';
+import { PickList } from '../../Components/PickList/PickList';
+import { VssIcon } from "../../VssIcon";
+import { ItemIndicatorSet } from "../../ItemIndicator";
+import "./PickListDropdown.css";
+var DEFAULT_PICKLIST_WIDTH = 200;
+var DEFAULT_VIRTUALIZATION_LIMIT = 50;
+var PickListDropdown = /** @class */ (function (_super) {
+    tslib_1.__extends(PickListDropdown, _super);
+    function PickListDropdown(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {
+            isListOpen: false,
+            pickListWidth: DEFAULT_PICKLIST_WIDTH
+        };
+        _this._shouldRefocus = true;
+        return _this;
+    }
+    PickListDropdown.prototype.focus = function () {
+        if (this.state.isListOpen) {
+            this._pickList.focus();
+        }
+        else {
+            this._dropdownTitle.focus();
+        }
+    };
+    PickListDropdown.prototype.forceUpdate = function () {
+        if (this._pickList) {
+            this._pickList.forceUpdate();
+        }
+    };
+    PickListDropdown.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, className = _a.className, pickListClassName = _a.pickListClassName, placeholder = _a.placeholder, selectedItems = _a.selectedItems, getPickListItems = _a.getPickListItems, disabled = _a.disabled, selectionMode = _a.selectionMode, _b = _a.preventDismissOnScroll, preventDismissOnScroll = _b === void 0 ? true : _b, tabIndex = _a.tabIndex;
+        var isListOpen = this.state.isListOpen;
+        var hasSelectedItems = selectedItems && selectedItems.length > 0;
+        var titleText = hasSelectedItems ? this._getTitleText() : placeholder;
+        var fullClassName = css('vss-PickListDropdown', className);
+        var fullPickListClassName = css('vss-PickListDropdown--list', pickListClassName);
+        var ariaLabel = titleText;
+        if (this.props.ariaLabelFormat) {
+            ariaLabel = format(this.props.ariaLabelFormat, hasSelectedItems ? titleText : "");
+        }
+        var iconProps = undefined;
+        if (hasSelectedItems) {
+            if (selectionMode === SelectionMode.multiple) {
+                iconProps = {
+                    iconType: 0 /* fabric */,
+                    iconName: 'CheckMark',
+                    className: 'vss-PickListDropdown--title-checkIcon'
+                };
+            }
+            else {
+                iconProps = this._getIconFromItem(selectedItems[0]);
+            }
+        }
+        return (React.createElement("div", { className: fullClassName, ref: this._resolveRef('_dropdown') },
+            React.createElement("div", { tabIndex: disabled ? -1 : (tabIndex || 0), ref: function (element) { return _this._dropdownTitle = element; }, onClick: this._onClick, onKeyDown: this._onKeyDown, className: css('vss-PickListDropdown--title', { 'vss-PickListDropdown--placeholder': !hasSelectedItems, 'disabled': disabled, 'focused': isListOpen }), "aria-expanded": isListOpen, "aria-label": ariaLabel, "aria-disabled": !!disabled, role: 'combobox' },
+                iconProps &&
+                    React.createElement(VssIcon, tslib_1.__assign({}, iconProps)),
+                React.createElement("div", { className: 'vss-PickListDropdown--title-textContainer' },
+                    React.createElement(TooltipHost, { content: titleText, overflowMode: TooltipOverflowMode.Parent },
+                        React.createElement("span", { className: 'vss-PickListDropdown--title-text', role: 'textbox', "aria-readonly": true }, titleText))),
+                React.createElement(VssIcon, { className: 'vss-PickListDropdown--title-caretIcon', iconType: 0 /* fabric */, iconName: 'ChevronDown' }),
+                this.getIndicators()),
+            isListOpen &&
+                React.createElement(Callout, { onDismiss: this._onDismiss, onPositioned: this._onPositioned, target: this._dropdown, isBeakVisible: false, preventDismissOnScroll: preventDismissOnScroll, gapSpace: 0, directionalHint: 4 /* bottomLeftEdge */ },
+                    React.createElement(PickList, tslib_1.__assign({}, this.props, { width: this.state.pickListWidth, className: fullPickListClassName, onSelectionChanged: this._onSelectionChanged, componentRef: function (pickList) { return _this._pickList = pickList; }, items: getPickListItems(), onFocusLost: this._onPickListFocusLost, shouldVirtualize: function (items) {
+                            // Virtualization is disabled for the number of items below certain limit since callout positioning happens
+                            // before new pages are added which ends up a wrong callout position. 
+                            //
+                            // Scenario is the space below the target may be sufficient for the first page and callout is 
+                            // positioned below target. Once the other pages are added, callout needs to be repositioned 
+                            // to be next to or even on top of target which does not happen.
+                            // 
+                            // By specifying a high limit we make sure that positioning will take as much space as possible so that
+                            // no repositioning is required.
+                            return (items || []).length > DEFAULT_VIRTUALIZATION_LIMIT;
+                        } })))));
+    };
+    PickListDropdown.prototype._getTitleText = function () {
+        var selectedItems = this.props.selectedItems;
+        var text = this._getNameFromItem(selectedItems[0]);
+        if (selectedItems.length > 1) {
+            text = text + " (+" + (selectedItems.length - 1) + ")";
+        }
+        return text;
+    };
+    PickListDropdown.prototype.getIndicators = function () {
+        var _a = this.props, selectedItems = _a.selectedItems, selectedItemIndicators = _a.selectedItemIndicators;
+        if (selectedItems && selectedItems.length && selectedItemIndicators && selectedItemIndicators.length) {
+            return React.createElement(ItemIndicatorSet, { indicators: selectedItemIndicators.map(function (indicator) { return indicator.getItemIndicator(selectedItems[0]); }) });
+        }
+        else {
+            return null;
+        }
+    };
+    PickListDropdown.prototype._onClick = function () {
+        if (!this.props.disabled) {
+            this._togglePickList(!this.state.isListOpen);
+        }
+    };
+    PickListDropdown.prototype._onKeyDown = function (ev) {
+        if (!this.props.disabled) {
+            if (ev.which === 13 /* enter */ || ev.which === 40 /* down */) {
+                this._togglePickList(!this.state.isListOpen);
+                ev.preventDefault();
+            }
+            else if (ev.which === 27 /* escape */) {
+                this._togglePickList(false);
+                this._dropdownTitle.focus();
+            }
+        }
+    };
+    PickListDropdown.prototype._onPickListFocusLost = function () {
+        this._shouldRefocus = true;
+        this._togglePickList(false);
+    };
+    PickListDropdown.prototype._onPositioned = function () {
+        if (this._shouldRefocus) {
+            this._shouldRefocus = false;
+            this._pickList.focus();
+        }
+    };
+    PickListDropdown.prototype._onDismiss = function (ev) {
+        this._shouldRefocus = true;
+        this._togglePickList(false);
+        if (ev.which === 27 /* escape */) {
+            this._dropdownTitle.focus();
+        }
+    };
+    PickListDropdown.prototype._onSelectionChanged = function (selection) {
+        var isListOpen = this.state.isListOpen && this.props.selectionMode === SelectionMode.multiple;
+        this._togglePickList(isListOpen);
+        if (this.props.onSelectionChanged) {
+            this.props.onSelectionChanged(selection);
+        }
+    };
+    PickListDropdown.prototype._getNameFromItem = function (item) {
+        if (this.props.getListItem) {
+            return this.props.getListItem(item).name;
+        }
+        return item;
+    };
+    PickListDropdown.prototype._getIconFromItem = function (item) {
+        if (this.props.getListItem) {
+            return this.props.getListItem(item).iconProps;
+        }
+        return undefined;
+    };
+    PickListDropdown.prototype._togglePickList = function (isListOpen) {
+        var pickListWidth = this._dropdownTitle ? this._dropdownTitle.clientWidth : DEFAULT_PICKLIST_WIDTH;
+        pickListWidth -= 2; // -2 for the borders
+        this.setState({ isListOpen: isListOpen, pickListWidth: pickListWidth });
+    };
+    tslib_1.__decorate([
+        autobind
+    ], PickListDropdown.prototype, "_onClick", null);
+    tslib_1.__decorate([
+        autobind
+    ], PickListDropdown.prototype, "_onKeyDown", null);
+    tslib_1.__decorate([
+        autobind
+    ], PickListDropdown.prototype, "_onPickListFocusLost", null);
+    tslib_1.__decorate([
+        autobind
+    ], PickListDropdown.prototype, "_onPositioned", null);
+    tslib_1.__decorate([
+        autobind
+    ], PickListDropdown.prototype, "_onDismiss", null);
+    tslib_1.__decorate([
+        autobind
+    ], PickListDropdown.prototype, "_onSelectionChanged", null);
+    return PickListDropdown;
+}(BaseComponent));
+export { PickListDropdown };

Components/PickList/PickListFilterBarItem.js

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

Components/PivotBar/index.d.ts

 export * from './PivotBar';
-export * from './PivotBar.Props';
+
 export * from './PivotBarAction';
 export * from './PivotBarItem';
-export * from './PivotBarItem.Props';
+
 export * from './PivotCommandBar';
-export * from './PivotCommandBar.Props';
+

Components/PivotBar/index.js

@@ -1,1 +0,10 @@
-export*from"./PivotBar";export*from"./PivotBar.Props";export*from"./PivotBarAction";export*from"./PivotBarItem";export*from"./PivotBarItem.Props";export*from"./PivotCommandBar";
+export * from './PivotBar';
+
+export * from './PivotBarAction';
+export * from './PivotBarItem';
+
+export * from './PivotCommandBar';
+// @NOTE: Explicit export list due to typescript compiler bug 18644 where a require is generated for export * when const enum's are present
+//export { IVssPivotBarItemProvider, IVssContributedPivotBarItem, PivotBarFocusItem, IPivotBar, IPivotBarProps, PivotRenderingMode, IPivotRenderingModeOptions, IDropDownPivotRenderingModeProps, } from './PivotBar.Props';
+//export { PivotBarItemDeselectionBehavior, IPivotBarItemProps, } from './PivotBarItem.Props';
+//export { IPivotCommandBar, IPivotCommandBarProps } from './PivotCommandBar.Props'; 

Components/PivotBar/PivotBar.js

@@ -1,1 +0,551 @@
-import*as tslib_1 from"tslib";import*as React from"react";import{autobind,BaseComponent,css,getId,findIndex}from"office-ui-fabric-react/lib/Utilities";import{FocusZone,FocusZoneDirection}from"office-ui-fabric-react/lib/FocusZone";import{CommandButton}from"office-ui-fabric-react/lib/Button";import{TooltipHost,TooltipOverflowMode}from"office-ui-fabric-react/lib/Tooltip";import{Dropdown}from"office-ui-fabric-react/lib/Dropdown";import{childrenOfType}from"../../Utilities/ChildrenUtils";import{PivotBarItem}from"../../Components/PivotBar/PivotBarItem";import{DynamicLink}from"../../Dynamic";import{HubTileRegion}from"../../HubHeader";import{FilterBar,KeywordFilterBarItem}from"../../FilterBar";import{FILTER_APPLIED_EVENT}from"../../Utilities/Filter";import{VssIcon}from"../../VssIcon";import{ObservableArray,ObservableLike}from"../../Utilities/Observable";import{ContributedItemArray}from"../../Utilities/ItemContribution";import{VIEW_OPTIONS_CHANGE_EVENT}from"../../Utilities/ViewOptions";import{arrayEquals}from"../../Utilities/Internal";import{PivotCommandBar}from"../../Components/PivotBar/PivotCommandBar";import"./PivotBar.css";var MAX_PIVOT_ITEM_WIDTH=340,MAX_PIVOT_WAIT=1e3,PivotBar=function(t){function e(e){var i=t.call(this,e)||this;return i._subscribedToPivotObservables=!1,i._pivotSelected=!1,i._pivotItemsRendered={},i._id=getId("PivotBar"),i._setupPivotObservables(i.props),i._actionsManager=new PivotActionsManager,i._disposables.push(i._actionsManager),i.state={items:i._getPivotBarItems(i.props)},i.state=tslib_1.__assign({hasAppliedFilter:!!i.props.filter&&i.props.filter.hasChangesToReset(),items:i.state.items},i._buildInitialPivotState()),i}return tslib_1.__extends(e,t),e.prototype.focus=function(t){if(this._commandBar)switch(t){case 0:this._commandBar.focus()}},e.prototype.componentWillReceiveProps=function(t){var e=this;arrayEquals(this.props.pivotProviders,t.pivotProviders)||this._setupPivotObservables(t);var i=this._getPivotBarItems(t);this.setState(function(o,r){return tslib_1.__assign({items:i},e._buildInitialPivotState(t,i,!0))})},e.prototype.componentDidMount=function(){this.props.viewOptions&&this.props.showFilterBarViewOptionKey&&this._events.on(this.props.viewOptions,VIEW_OPTIONS_CHANGE_EVENT,this._onViewOptionChanged),this.props.filter&&this._events.on(this.props.filter,FILTER_APPLIED_EVENT,this._onFilterApplied),this._subscribeToPivotObservables()},e.prototype.componentDidUpdate=function(){this.props.onRenderComplete&&this.props.onRenderComplete()},e.prototype.componentWillUnmount=function(){this.props.viewOptions&&this.props.showFilterBarViewOptionKey&&this._events.off(this.props.viewOptions,VIEW_OPTIONS_CHANGE_EVENT,this._onViewOptionChanged),this.props.filter&&this._events.off(this.props.filter,FILTER_APPLIED_EVENT,this._onFilterApplied),this._contributedPivotWait&&(clearTimeout(this._contributedPivotWait),this._contributedPivotWait=null),this._unsubscribeFromPivotObservables()},e.prototype.render=function(){var t=this.props,e=t.className,i=t.filter,o=t.showPivots,r=t.showFilterBarViewOptionKey,s=t.filterBarClassName,n=t.pivotRenderingModeOptions,a=this.state,l=(a.selectedPivotId,a.showFilterBar),p=React.Children.toArray(this.props.children)||[],c=p.filter(function(t){return"object"!=typeof t||t.type!==PivotBarItem&&t.type!==FilterBar&&t.type!==HubTileRegion}),d=null,v=this._getHubTileRegionIndex(p);v>-1&&(d=p[v]);var m=null,u=v>-1;void 0===o?o=this.state.items&&this.state.items.length>1:u=u&&o,o&&(m=this._renderPivotItems(n));var h=!o&&!u,b=h?"vss-PivotBar--bar-one-line":"vss-PivotBar--bar-two-line";this.props.viewOptions&&r&&(l=this.props.viewOptions.getViewOption(r));var _,f=this._getFilterBarSettings(p),P=f&&f.showInline;f&&(l||f.showInline)&&(_=f.filterBarElement,_=React.cloneElement(_,{className:css(_.props.className,s),filter:_.props.filter||i,onMounted:function(t){P||t.focus()}}));var y=!(!m&&!h);return React.createElement("div",{className:css("vss-PivotBar",e)},React.createElement("div",{className:b},React.createElement("div",{className:"vss-PivotBar--header"},c,u&&d),React.createElement("div",{className:"vss-PivotBar--bar"},m,this._renderCommandBar(P?_:null,!!f,y))),P?null:_,this._renderContent())},e.prototype._renderPivotItems=function(t){return t&&1===t.mode?this._renderDropdown(t.props):this._renderHorizontalTabs()},e.prototype._renderDropdown=function(t){for(var e=[],i=0,o=this.state.items;i<o.length;i++){var r=o[i];e.push({key:r.itemKey,text:r.name})}return React.createElement(Dropdown,{className:"vss-PivotBar--dropdown",selectedKey:this.state.selectedPivot,options:e,onChanged:this._onDropDownSelected,dropdownWidth:t.dropdownWidth})},e.prototype._onDropDownSelected=function(t){var e=t.key;this._updateSelectedItem(e,null)},e.prototype._renderHorizontalTabs=function(){return React.createElement(FocusZone,{className:"vss-PivotBar--pivots",role:"tablist",direction:FocusZoneDirection.horizontal},this.state.items&&this.state.items.map(this._renderPivotItem))},e.prototype._renderPivotItem=function(t,e){var i=t.itemKey,o=this.state.selectedPivot===i;return React.createElement(DynamicLink,{url:t.url,className:css("vss-PivotBar--itemLink",t.child&&t.child.props.headerClassName),tabIndex:-1,role:"presentation","data-is-focusable":!1,key:i},React.createElement(CommandButton,{id:t.id,className:css("vss-PivotBar--button",o?"selected":""),onClick:this._onPivotClick.bind(this,i),onKeyPress:this._onKeyPress.bind(this,i),ariaLabel:t.ariaLabel,role:"tab","aria-selected":o},this._renderPivotItemContent(t)))},e.prototype._renderPivotItemContent=function(t){var e=t.name,i=t.iconProps,o=t.badgeCount,r=t.maxItemWidth;return React.createElement("span",null,void 0!==i&&React.createElement(VssIcon,tslib_1.__assign({className:"icon"},i)),void 0!==e&&React.createElement("span",{className:"text",style:{maxWidth:r||MAX_PIVOT_ITEM_WIDTH}},React.createElement(TooltipHost,{content:e,overflowMode:TooltipOverflowMode.Parent},e)),void 0!==o&&React.createElement("span",{className:"badge"},o))},e.prototype._renderCommandBar=function(t,e,i){var o=this;return React.createElement(PivotCommandBar,{componentRef:function(t){o._commandBar=t},className:"vss-PivotBar--commandBar",commands:this.state.commands,viewActions:this.state.viewActions,filterBar:t,showFilterAction:e,showFilterBarViewOptionKey:this.props.showFilterBarViewOptionKey,hasAppliedFilter:this.state.hasAppliedFilter,prependSeparator:i,viewOptions:this.props.viewOptions,onShowFilterBarClicked:this._onShowFilterBarClicked})},e.prototype._renderContent=function(){for(var t=[],e=(this.state.selectedPivot||"").toUpperCase(),i=0,o=this.state.items;i<o.length;i++){var r=o[i],s=r.itemKey.toUpperCase(),n=e===s,a=!n&&1===r.deselectionBehavior&&!0===this._pivotItemsRendered[s];(n||a)&&(t.push(React.createElement("div",{key:s,className:css("vss-PivotBar--content",{"hide-content":a}),role:"tabpanel","aria-labelledby":r.id},r&&(r.child||r.contributedItem.render(css("vss-PivotBarItem","content-host"))))),this._pivotItemsRendered[s]=!0)}return t},e.prototype._onShowFilterBarClicked=function(){this.setState({showFilterBar:!this.state.showFilterBar})},e.prototype._onFilterApplied=function(){var t=this.props.filter.hasChangesToReset();t!==this.state.hasAppliedFilter&&this.setState({hasAppliedFilter:t})},e.prototype._onContributedPivotsChanged=function(){this.setState({items:this._getPivotBarItems(this.props)}),this._pivotSelected||this.setState(this._buildInitialPivotState())},e.prototype._onViewOptionChanged=function(t){var e=this.props.showFilterBarViewOptionKey,i=this.state.viewActions,o=e in t;if(!o){var r=[];i&&i.forEach(function(t){return r.push.apply(r,t.items)});var s=function(t){if(findIndex(r,function(e){return e.key===t})>=0)return o=!0,"break"};for(var n in t){if("break"===s(n))break}}o&&this.forceUpdate()},e.prototype._makeIPivotBarItemFromContribution=function(t,e){return{contributedItem:t,id:this._makeContributedPivotBarItemId(t,e),itemKey:t.itemKey||t.id,name:t.text,ariaLabel:null,commandProviders:t.commandProviders,viewActionProviders:t.viewActionProviders,url:t.url}},e.prototype._makePivotBarItemId=function(t){return this._id+"-Tab"+t.index},e.prototype._makeContributedPivotBarItemId=function(t,e){return this._id+"-ContributedTab"+e},e.prototype._getPivotBarItemByItemKey=function(t,e){void 0===e&&(e=this.state.items);var i=(t||"").toUpperCase(),o=findIndex(e,function(t){return t.itemKey.toUpperCase()===i});return o>=0?e[o]:void 0},e.prototype._getPivotBarItems=function(t){for(var e=[],i=0,o=childrenOfType(t.children,PivotBarItem);i<o.length;i++){var r=o[i],s=r.item.props;s.hidden||e.push({child:r.item,id:this._makePivotBarItemId(r),itemKey:s.itemKey,name:s.name,ariaLabel:s.ariaLabel,iconProps:s.iconProps,badgeCount:s.badgeCount,maxItemWidth:s.maxItemWidth,commands:s.commands,viewActions:s.viewActions,commandProviders:s.commandProviders,viewActionProviders:s.viewActionProviders,deselectionBehavior:s.deselectionBehavior,url:s.url})}return this._contributedPivots.forEach(function(t){return e.push.apply(e,t.items)}),e},e.prototype._setupPivotObservables=function(t){var e=this,i=0,o=this._subscribedToPivotObservables;o&&this._unsubscribeFromPivotObservables(),this._contributedPivots=[],t.pivotProviders&&(t.pivotProviders.forEach(function(t){var o=new ContributedItemArray(t,function(t){return e._makeIPivotBarItemFromContribution(t,i++)});e._contributedPivots.push(o)}),o&&this._subscribeToPivotObservables())},e.prototype._unsubscribeFromPivotObservables=function(){var t=this;this._contributedPivots.forEach(function(e){return e.unsubscribe(t._onContributedPivotsChanged)}),this._subscribedToPivotObservables=!1},e.prototype._subscribeToPivotObservables=function(){var t=this;this._contributedPivots.forEach(function(e){return e.subscribe(t._onContributedPivotsChanged)}),this._subscribedToPivotObservables=!0},e.prototype._getFilterBarSettings=function(t){var e,i=this.props,o=i.onRenderFilterBar,r=i.showFilterBarInline;if(o&&(e=o()),!e){var s=findIndex(t,function(t){return"object"==typeof t&&t.type===FilterBar});if(s>=0){var n=t[s],a=React.Children.toArray(n.props.children);if(a&&a.length>=1&&(e=n,1===a.length&&!r)){var l=a[0];"object"==typeof l&&l.type===KeywordFilterBarItem&&(r=!0)}}}if(e)return{filterBarElement:e,showInline:r}},e.prototype._getHubTileRegionIndex=function(t){return findIndex(t,function(t){return"object"==typeof t&&t.type===HubTileRegion})},e.prototype._isKeyValid=function(t){return void 0!==t&&void 0!==this._getPivotBarItemByItemKey(t)},e.prototype._buildInitialPivotState=function(t,e,i){var o=this;void 0===t&&(t=this.props),void 0===i&&(i=!1);var r=t.initialSelectedPivot;return this._isKeyValid(r)||(r=t.selectedPivot),this._isKeyValid(r)||(r=null,this._contributedPivotWait||(this._contributedPivotWait=setTimeout(function(){if(!o._pivotSelected){var i=e||o._getPivotBarItems(t);i.length&&(r=i[0].itemKey,o._updateSelectedItem(r,null))}o._contributedPivotWait=null},MAX_PIVOT_WAIT))),this._pivotSelected=null!==r,this._buildNewPivotState(t,r,e,i)},e.prototype._buildNewPivotState=function(t,e,i,o){void 0===o&&(o=!1);var r=this._getPivotBarItemByItemKey(e,i),s=e&&r;return{selectedPivot:s?r.itemKey:"",selectedPivotId:s?r.id:"",commands:s?this._actionsManager.getCommandObservables(t.commands,r,o):[],viewActions:s?this._actionsManager.getViewActionObservables(t.viewActions,r,o):[]}},e.prototype._onPivotClick=function(t,e){var i=!0;if(e.ctrlKey){var o=this._getPivotBarItemByItemKey(t);o&&o.url&&("string"==typeof o.url||o.url.value)&&(i=!1)}i&&(e.preventDefault(),this._updateSelectedItem(t,e))},e.prototype._onKeyPress=function(t,e){e.preventDefault(),13===e.which&&this._updateSelectedItem(t,e)},e.prototype._updateSelectedItem=function(t,e){var i=this.props;this._pivotSelected=!0,this.setState(this._buildNewPivotState(i,t)),i.onPivotClicked&&i.onPivotClicked(e,t)},tslib_1.__decorate([autobind],e.prototype,"_onDropDownSelected",null),tslib_1.__decorate([autobind],e.prototype,"_renderPivotItem",null),tslib_1.__decorate([autobind],e.prototype,"_onShowFilterBarClicked",null),tslib_1.__decorate([autobind],e.prototype,"_onFilterApplied",null),tslib_1.__decorate([autobind],e.prototype,"_onContributedPivotsChanged",null),tslib_1.__decorate([autobind],e.prototype,"_onViewOptionChanged",null),tslib_1.__decorate([autobind],e.prototype,"_makeIPivotBarItemFromContribution",null),e}(BaseComponent);export{PivotBar};var PivotActionsManager=function(){function t(){this._commands={},this._viewActions={}}return t.prototype.getCommandObservables=function(t,e,i){void 0===i&&(i=!1);var o=e.id;if(!0===i&&delete this._commands[o],!this._commands[o]){var r=[];this._commands[o]=r,r.push(ObservableLike.isObservable(t)?t:new ObservableArray(t)),r.push(ObservableLike.isObservable(e.commands)?e.commands:new ObservableArray(e.commands)),e.commandProviders&&e.commandProviders.forEach(function(t){var e=new ContributedItemArray(t,function(t){return t});r.push(e)})}return this._commands[o]},t.prototype.getViewActionObservables=function(t,e,i){void 0===i&&(i=!1);var o=e.id;if(!0===i&&delete this._viewActions[o],!this._viewActions[o]){var r=[];this._viewActions[o]=r,r.push(ObservableLike.isObservable(e.viewActions)?e.viewActions:new ObservableArray(e.viewActions)),e.viewActionProviders&&e.viewActionProviders.forEach(function(t){var e=new ContributedItemArray(t,function(t){return t});r.push(e)}),r.push(ObservableLike.isObservable(t)?t:new ObservableArray(t))}return this._viewActions[o]},t.prototype.dispose=function(){this._commands=null,this._viewActions=null},t}();
+import * as tslib_1 from "tslib";
+import * as React from 'react';
+import { autobind, BaseComponent, css, getId, findIndex } from 'office-ui-fabric-react/lib/Utilities';
+import { FocusZone, FocusZoneDirection } from 'office-ui-fabric-react/lib/FocusZone';
+import { CommandButton } from 'office-ui-fabric-react/lib/Button';
+import { TooltipHost, TooltipOverflowMode } from 'office-ui-fabric-react/lib/Tooltip';
+import { Dropdown } from 'office-ui-fabric-react/lib/Dropdown';
+import { childrenOfType } from '../../Utilities/ChildrenUtils';
+import { PivotBarItem } from '../../Components/PivotBar/PivotBarItem';
+import { DynamicLink } from '../../Dynamic';
+import { HubTileRegion } from '../../HubHeader';
+import { FilterBar, KeywordFilterBarItem } from '../../FilterBar';
+import { FILTER_APPLIED_EVENT } from '../../Utilities/Filter';
+import { VssIcon } from '../../VssIcon';
+import { ObservableArray, ObservableLike } from '../../Utilities/Observable';
+import { ContributedItemArray } from '../../Utilities/ItemContribution';
+import { VIEW_OPTIONS_CHANGE_EVENT } from '../../Utilities/ViewOptions';
+import { arrayEquals } from '../../Utilities/Internal';
+import { PivotCommandBar } from '../../Components/PivotBar/PivotCommandBar';
+import "./PivotBar.css";
+var MAX_PIVOT_ITEM_WIDTH = 340;
+/**
+ * How long after load to wait (in milliseconds) to see if the selected pivot gets contributed
+ * before giving up and selecting a different pivot instead.
+ */
+var MAX_PIVOT_WAIT = 1000;
+/**
+ * A PivotBar combines a Pivot component (tabs and tabbed content) along with a set of
+ * commands (rendered after the pivots) and view actions (rendered on the far right).
+ */
+var PivotBar = /** @class */ (function (_super) {
+    tslib_1.__extends(PivotBar, _super);
+    function PivotBar(props) {
+        var _this = _super.call(this, props) || this;
+        _this._subscribedToPivotObservables = false;
+        /** True if we have successfully found the selected pivot after load */
+        _this._pivotSelected = false;
+        /** Remembers which pivot items have been rendered */
+        _this._pivotItemsRendered = {};
+        _this._id = getId('PivotBar');
+        _this._setupPivotObservables(_this.props);
+        _this._actionsManager = new PivotActionsManager();
+        _this._disposables.push(_this._actionsManager);
+        _this.state = {
+            items: _this._getPivotBarItems(_this.props)
+        };
+        // _buildInitialPivotState needs to have this.state.items set.
+        _this.state = tslib_1.__assign({ hasAppliedFilter: _this.props.filter ? _this.props.filter.hasChangesToReset() : false, items: _this.state.items }, _this._buildInitialPivotState());
+        return _this;
+    }
+    PivotBar.prototype.focus = function (focusItem) {
+        if (this._commandBar) {
+            switch (focusItem) {
+                case 0 /* commands */:
+                    this._commandBar.focus();
+                    break;
+            }
+        }
+    };
+    /**
+     * This gets executed when a container component re-renders PivotBar.
+     * @param nextProps New props.
+     */
+    PivotBar.prototype.componentWillReceiveProps = function (nextProps) {
+        var _this = this;
+        if (!arrayEquals(this.props.pivotProviders, nextProps.pivotProviders)) {
+            this._setupPivotObservables(nextProps);
+        }
+        // Get the pivot items from the child elements
+        var items = this._getPivotBarItems(nextProps);
+        this.setState(function (prevState, props) {
+            return tslib_1.__assign({ items: items }, _this._buildInitialPivotState(nextProps, items, true));
+        });
+    };
+    PivotBar.prototype.componentDidMount = function () {
+        if (this.props.viewOptions && this.props.showFilterBarViewOptionKey) {
+            this._events.on(this.props.viewOptions, VIEW_OPTIONS_CHANGE_EVENT, this._onViewOptionChanged);
+        }
+        if (this.props.filter) {
+            this._events.on(this.props.filter, FILTER_APPLIED_EVENT, this._onFilterApplied);
+        }
+        this._subscribeToPivotObservables();
+    };
+    PivotBar.prototype.componentDidUpdate = function () {
+        if (this.props.onRenderComplete) {
+            this.props.onRenderComplete();
+        }
+    };
+    PivotBar.prototype.componentWillUnmount = function () {
+        if (this.props.viewOptions && this.props.showFilterBarViewOptionKey) {
+            this._events.off(this.props.viewOptions, VIEW_OPTIONS_CHANGE_EVENT, this._onViewOptionChanged);
+        }
+        if (this.props.filter) {
+            this._events.off(this.props.filter, FILTER_APPLIED_EVENT, this._onFilterApplied);
+        }
+        if (this._contributedPivotWait) {
+            clearTimeout(this._contributedPivotWait);
+            this._contributedPivotWait = null;
+        }
+        this._unsubscribeFromPivotObservables();
+    };
+    PivotBar.prototype.render = function () {
+        var _a = this.props, className = _a.className, filter = _a.filter, showPivots = _a.showPivots, showFilterBarViewOptionKey = _a.showFilterBarViewOptionKey, filterBarClassName = _a.filterBarClassName, pivotRenderingModeOptions = _a.pivotRenderingModeOptions;
+        var _b = this.state, selectedPivotId = _b.selectedPivotId, showFilterBar = _b.showFilterBar;
+        var children = React.Children.toArray(this.props.children) || [];
+        var rawChildren = children.filter(function (c) { return typeof c !== 'object' || (c.type !== PivotBarItem && c.type !== FilterBar && c.type !== HubTileRegion); });
+        var hubTileRegion = null;
+        var hubTileRegionIndex = this._getHubTileRegionIndex(children);
+        if (hubTileRegionIndex > -1) {
+            hubTileRegion = children[hubTileRegionIndex];
+        }
+        var pivotItems = null;
+        var showHubTiles = hubTileRegionIndex > -1;
+        if (showPivots === undefined) {
+            showPivots = (this.state.items && this.state.items.length > 1);
+        }
+        else {
+            showHubTiles = showHubTiles && showPivots;
+        }
+        if (showPivots) {
+            pivotItems = this._renderPivotItems(pivotRenderingModeOptions);
+        }
+        var singleLineMode = !showPivots && !showHubTiles;
+        var barClassName = singleLineMode ? "vss-PivotBar--bar-one-line" : "vss-PivotBar--bar-two-line";
+        if (this.props.viewOptions && showFilterBarViewOptionKey) {
+            showFilterBar = this.props.viewOptions.getViewOption(showFilterBarViewOptionKey);
+        }
+        var filterBarElement;
+        var filterBarSettings = this._getFilterBarSettings(children);
+        var showFilterInline = filterBarSettings && filterBarSettings.showInline;
+        if (filterBarSettings && (showFilterBar || filterBarSettings.showInline)) {
+            filterBarElement = filterBarSettings.filterBarElement;
+            filterBarElement = React.cloneElement(filterBarElement, {
+                className: css(filterBarElement.props.className, filterBarClassName),
+                filter: filterBarElement.props.filter || filter,
+                onMounted: function (filterBar) {
+                    if (!showFilterInline) {
+                        filterBar.focus();
+                    }
+                }
+            });
+        }
+        // render a separator before the commands if we have items or we're in single line mode
+        var prependSeparator = !!(pivotItems || singleLineMode);
+        return (React.createElement("div", { className: css("vss-PivotBar", className) },
+            React.createElement("div", { className: barClassName },
+                React.createElement("div", { className: 'vss-PivotBar--header' },
+                    rawChildren,
+                    showHubTiles && hubTileRegion),
+                React.createElement("div", { className: "vss-PivotBar--bar" },
+                    pivotItems,
+                    this._renderCommandBar(showFilterInline ? filterBarElement : null, !!filterBarSettings, prependSeparator))),
+            showFilterInline ? null : filterBarElement,
+            this._renderContent()));
+    };
+    PivotBar.prototype._renderPivotItems = function (pivotRenderingModeOptions) {
+        if (pivotRenderingModeOptions && pivotRenderingModeOptions.mode === 1 /* DropDown */) {
+            return this._renderDropdown(pivotRenderingModeOptions.props);
+        }
+        else {
+            return this._renderHorizontalTabs();
+        }
+    };
+    PivotBar.prototype._renderDropdown = function (props) {
+        var options = [];
+        for (var _i = 0, _a = this.state.items; _i < _a.length; _i++) {
+            var item = _a[_i];
+            options.push({ key: item.itemKey, text: item.name });
+        }
+        return React.createElement(Dropdown, { className: "vss-PivotBar--dropdown", selectedKey: this.state.selectedPivot, options: options, onChanged: this._onDropDownSelected, dropdownWidth: props.dropdownWidth });
+    };
+    PivotBar.prototype._onDropDownSelected = function (option) {
+        var itemKey = option.key;
+        this._updateSelectedItem(itemKey, null);
+    };
+    PivotBar.prototype._renderHorizontalTabs = function () {
+        return (React.createElement(FocusZone, { className: "vss-PivotBar--pivots", role: "tablist", direction: FocusZoneDirection.horizontal }, this.state.items && this.state.items.map(this._renderPivotItem)));
+    };
+    PivotBar.prototype._renderPivotItem = function (item, index) {
+        var itemKey = item.itemKey;
+        var isSelected = this.state.selectedPivot === itemKey;
+        return (React.createElement(DynamicLink, { url: item.url, className: css('vss-PivotBar--itemLink', item.child && item.child.props.headerClassName), tabIndex: -1, role: 'presentation', "data-is-focusable": false, key: itemKey },
+            React.createElement(CommandButton, { id: item.id, className: css("vss-PivotBar--button", isSelected ? "selected" : ""), onClick: this._onPivotClick.bind(this, itemKey), onKeyPress: this._onKeyPress.bind(this, itemKey), ariaLabel: item.ariaLabel, role: 'tab', "aria-selected": isSelected }, this._renderPivotItemContent(item))));
+    };
+    PivotBar.prototype._renderPivotItemContent = function (item) {
+        var name = item.name, iconProps = item.iconProps, badgeCount = item.badgeCount, maxItemWidth = item.maxItemWidth;
+        return (React.createElement("span", null,
+            iconProps !== undefined && (React.createElement(VssIcon, tslib_1.__assign({ className: "icon" }, iconProps))),
+            name !== undefined &&
+                React.createElement("span", { className: "text", style: { maxWidth: maxItemWidth || MAX_PIVOT_ITEM_WIDTH } },
+                    React.createElement(TooltipHost, { content: name, overflowMode: TooltipOverflowMode.Parent }, name)),
+            badgeCount !== undefined && React.createElement("span", { className: "badge" }, badgeCount)));
+    };
+    PivotBar.prototype._renderCommandBar = function (filterBar, showFilterAction, prependSeparator) {
+        var _this = this;
+        return (React.createElement(PivotCommandBar, { componentRef: (function (commandBar) { _this._commandBar = commandBar; }), className: "vss-PivotBar--commandBar", commands: this.state.commands, viewActions: this.state.viewActions, filterBar: filterBar, showFilterAction: showFilterAction, showFilterBarViewOptionKey: this.props.showFilterBarViewOptionKey, hasAppliedFilter: this.state.hasAppliedFilter, prependSeparator: prependSeparator, viewOptions: this.props.viewOptions, onShowFilterBarClicked: this._onShowFilterBarClicked }));
+    };
+    PivotBar.prototype._renderContent = function () {
+        var content = [];
+        var selectedPivot = (this.state.selectedPivot || "").toUpperCase();
+        for (var _i = 0, _a = this.state.items; _i < _a.length; _i++) {
+            var item = _a[_i];
+            var itemKeyUpperCase = item.itemKey.toUpperCase();
+            var isSelected = selectedPivot === itemKeyUpperCase;
+            var shouldHide = !isSelected
+                && item.deselectionBehavior === 1 /* Hide */
+                && this._pivotItemsRendered[itemKeyUpperCase] === true;
+            if (isSelected || shouldHide) {
+                content.push(React.createElement("div", { key: itemKeyUpperCase, className: css("vss-PivotBar--content", { "hide-content": shouldHide }), role: "tabpanel", "aria-labelledby": item.id }, item && (item.child || item.contributedItem.render(css("vss-PivotBarItem", "content-host")))));
+                this._pivotItemsRendered[itemKeyUpperCase] = true;
+            }
+        }
+        return content;
+    };
+    PivotBar.prototype._onShowFilterBarClicked = function () {
+        this.setState({
+            showFilterBar: !this.state.showFilterBar
+        });
+    };
+    PivotBar.prototype._onFilterApplied = function () {
+        var hasAppliedFilter = this.props.filter.hasChangesToReset();
+        if (hasAppliedFilter !== this.state.hasAppliedFilter) {
+            this.setState({
+                hasAppliedFilter: hasAppliedFilter
+            });
+        }
+    };
+    PivotBar.prototype._onContributedPivotsChanged = function () {
+        this.setState({
+            items: this._getPivotBarItems(this.props)
+        });
+        if (!this._pivotSelected) {
+            this.setState(this._buildInitialPivotState());
+        }
+    };
+    PivotBar.prototype._onViewOptionChanged = function (changedOptions) {
+        var showFilterBarViewOptionKey = this.props.showFilterBarViewOptionKey;
+        var viewActions = this.state.viewActions;
+        var needsUpdate = showFilterBarViewOptionKey in changedOptions;
+        if (!needsUpdate) {
+            var allViewActions_1 = [];
+            if (viewActions) {
+                viewActions.forEach(function (va) { return allViewActions_1.push.apply(allViewActions_1, va.items); });
+            }
+            var _loop_1 = function (changedOptionKey) {
+                if (findIndex(allViewActions_1, function (a) { return a.key === changedOptionKey; }) >= 0) {
+                    needsUpdate = true;
+                    return "break";
+                }
+            };
+            for (var changedOptionKey in changedOptions) {
+                var state_1 = _loop_1(changedOptionKey);
+                if (state_1 === "break")
+                    break;
+            }
+        }
+        if (needsUpdate) {
+            this.forceUpdate();
+        }
+    };
+    PivotBar.prototype._makeIPivotBarItemFromContribution = function (item, index) {
+        return {
+            contributedItem: item,
+            id: this._makeContributedPivotBarItemId(item, index),
+            itemKey: item.itemKey || item.id,
+            name: item.text,
+            ariaLabel: null,
+            commandProviders: item.commandProviders,
+            viewActionProviders: item.viewActionProviders,
+            // iconProps: null,
+            // badgeCount: null,
+            url: item['url'],
+        };
+    };
+    PivotBar.prototype._makePivotBarItemId = function (child) {
+        return this._id + "-Tab" + child.index;
+    };
+    PivotBar.prototype._makeContributedPivotBarItemId = function (item, index) {
+        return this._id + "-ContributedTab" + index;
+    };
+    PivotBar.prototype._getPivotBarItemByItemKey = function (itemKey, items) {
+        if (items === void 0) { items = this.state.items; }
+        var itemKeyUpperCase = (itemKey || "").toUpperCase();
+        var index = findIndex(items, function (i) { return i.itemKey.toUpperCase() === itemKeyUpperCase; });
+        return index >= 0 ? items[index] : undefined;
+    };
+    /**
+     * Extracts the pivot items from the child elements.
+     * @param props PivotBar properties.
+     */
+    PivotBar.prototype._getPivotBarItems = function (props) {
+        var items = [];
+        var pivotChildren = childrenOfType(props.children, PivotBarItem);
+        for (var _i = 0, pivotChildren_1 = pivotChildren; _i < pivotChildren_1.length; _i++) {
+            var pivot = pivotChildren_1[_i];
+            var props_1 = pivot.item.props;
+            if (!props_1.hidden) {
+                items.push({
+                    child: pivot.item,
+                    id: this._makePivotBarItemId(pivot),
+                    itemKey: props_1.itemKey,
+                    name: props_1.name,
+                    ariaLabel: props_1.ariaLabel,
+                    iconProps: props_1.iconProps,
+                    badgeCount: props_1.badgeCount,
+                    maxItemWidth: props_1.maxItemWidth,
+                    commands: props_1.commands,
+                    viewActions: props_1.viewActions,
+                    commandProviders: props_1.commandProviders,
+                    viewActionProviders: props_1.viewActionProviders,
+                    deselectionBehavior: props_1.deselectionBehavior,
+                    url: props_1.url,
+                });
+            }
+        }
+        // Add contributed pivots from the observed collections
+        this._contributedPivots.forEach(function (pivots) { return items.push.apply(items, pivots.items); });
+        return items;
+    };
+    PivotBar.prototype._setupPivotObservables = function (props) {
+        var _this = this;
+        var index = 0;
+        var wasSubscribed = this._subscribedToPivotObservables;
+        if (wasSubscribed) {
+            this._unsubscribeFromPivotObservables();
+        }
+        this._contributedPivots = [];
+        if (props.pivotProviders) {
+            props.pivotProviders.forEach(function (pivotProvider) {
+                var contributedItems = new ContributedItemArray(pivotProvider, function (item) { return _this._makeIPivotBarItemFromContribution(item, index++); });
+                _this._contributedPivots.push(contributedItems);
+            });
+            if (wasSubscribed) {
+                this._subscribeToPivotObservables();
+            }
+        }
+    };
+    PivotBar.prototype._unsubscribeFromPivotObservables = function () {
+        var _this = this;
+        this._contributedPivots.forEach(function (pivots) { return pivots.unsubscribe(_this._onContributedPivotsChanged); });
+        this._subscribedToPivotObservables = false;
+    };
+    PivotBar.prototype._subscribeToPivotObservables = function () {
+        var _this = this;
+        this._contributedPivots.forEach(function (pivots) { return pivots.subscribe(_this._onContributedPivotsChanged); });
+        this._subscribedToPivotObservables = true;
+    };
+    PivotBar.prototype._getFilterBarSettings = function (children) {
+        var _a = this.props, onRenderFilterBar = _a.onRenderFilterBar, showFilterBarInline = _a.showFilterBarInline;
+        var filterBarElement;
+        // Invoke a custom onRenderFilterBar prop which can return a custom filter bar (e.g. not of type FilterBar)
+        if (onRenderFilterBar) {
+            filterBarElement = onRenderFilterBar();
+        }
+        // Look for a child FilterBar if none was supplied by the onRenderFilterBar prop
+        if (!filterBarElement) {
+            var filterBarIndex = findIndex(children, function (child) { return typeof child === 'object' && child.type === FilterBar; });
+            if (filterBarIndex >= 0) {
+                var childFilterBarElement = children[filterBarIndex];
+                // Make sure that the child FilterBar has one or more child filters
+                var filterBarChildren = React.Children.toArray(childFilterBarElement.props.children);
+                if (filterBarChildren && filterBarChildren.length >= 1) {
+                    filterBarElement = childFilterBarElement;
+                    // Show the filterbar inline if it has only one filter which is a keyword filter
+                    if (filterBarChildren.length === 1 && !showFilterBarInline) {
+                        var firstFilterBarChild = filterBarChildren[0];
+                        if (typeof firstFilterBarChild === 'object' && firstFilterBarChild.type === KeywordFilterBarItem) {
+                            showFilterBarInline = true;
+                        }
+                    }
+                }
+            }
+        }
+        if (filterBarElement) {
+            return {
+                filterBarElement: filterBarElement,
+                showInline: showFilterBarInline
+            };
+        }
+    };
+    PivotBar.prototype._getHubTileRegionIndex = function (children) {
+        return findIndex(children, function (child) { return typeof child === 'object' && child.type === HubTileRegion; });
+    };
+    /**
+     * Determines whether the key exists in the pivot items or not.
+     */
+    PivotBar.prototype._isKeyValid = function (itemKey) {
+        return itemKey !== undefined && this._getPivotBarItemByItemKey(itemKey) !== undefined;
+    };
+    PivotBar.prototype._buildInitialPivotState = function (props, items, resetActions) {
+        var _this = this;
+        if (props === void 0) { props = this.props; }
+        if (resetActions === void 0) { resetActions = false; }
+        var selectedPivot = props.initialSelectedPivot;
+        if (!this._isKeyValid(selectedPivot)) {
+            selectedPivot = props.selectedPivot;
+        }
+        if (!this._isKeyValid(selectedPivot)) {
+            // display no pivot while we wait to see if the pivot will be contributed
+            selectedPivot = null;
+            if (!this._contributedPivotWait) {
+                this._contributedPivotWait = setTimeout(function () {
+                    if (!_this._pivotSelected) {
+                        // if the selected pivot has not yet been contributed, select the first pivot
+                        var currentItems = items || _this._getPivotBarItems(props);
+                        if (currentItems.length) {
+                            selectedPivot = currentItems[0].itemKey;
+                            _this._updateSelectedItem(selectedPivot, null);
+                        }
+                    }
+                    _this._contributedPivotWait = null;
+                }, MAX_PIVOT_WAIT);
+            }
+        }
+        this._pivotSelected = selectedPivot !== null;
+        return this._buildNewPivotState(props, selectedPivot, items, resetActions);
+    };
+    PivotBar.prototype._buildNewPivotState = function (props, selectedPivotItemKey, items, resetActions) {
+        if (resetActions === void 0) { resetActions = false; }
+        var selectedPivot = this._getPivotBarItemByItemKey(selectedPivotItemKey, items);
+        var selectedPivotAvailable = selectedPivotItemKey && selectedPivot;
+        return {
+            selectedPivot: selectedPivotAvailable ? selectedPivot.itemKey : "",
+            selectedPivotId: selectedPivotAvailable ? selectedPivot.id : "",
+            commands: selectedPivotAvailable ? this._actionsManager.getCommandObservables(props.commands, selectedPivot, resetActions) : [],
+            viewActions: selectedPivotAvailable ? this._actionsManager.getViewActionObservables(props.viewActions, selectedPivot, resetActions) : []
+        };
+    };
+    /**
+     * Handles the onClick event on the pivot button.
+     */
+    PivotBar.prototype._onPivotClick = function (itemKey, ev) {
+        var updatePivot = true;
+        // If ctrl-click is pressed, and there is a URL specified for this item, then
+        // don't handle the click here, allowing the browser to perform a navigation
+        // (i.e. open in a new tab/window)
+        if (ev.ctrlKey) {
+            var item = this._getPivotBarItemByItemKey(itemKey);
+            if (item && item.url) {
+                if (typeof item.url === "string" || item.url.value) {
+                    updatePivot = false;
+                }
+            }
+        }
+        if (updatePivot) {
+            ev.preventDefault();
+            this._updateSelectedItem(itemKey, ev);
+        }
+    };
+    /**
+     * Handle the onKeyPress event on the pivot button.
+     */
+    PivotBar.prototype._onKeyPress = function (itemKey, ev) {
+        ev.preventDefault();
+        if (ev.which === 13 /* enter */) {
+            this._updateSelectedItem(itemKey, ev);
+        }
+    };
+    /**
+     * Updates the state with the new selected pivot.
+     */
+    PivotBar.prototype._updateSelectedItem = function (itemKey, ev) {
+        var props = this.props;
+        this._pivotSelected = true;
+        this.setState(this._buildNewPivotState(props, itemKey));
+        // Update notifiers
+        if (props.onPivotClicked) {
+            props.onPivotClicked(ev, itemKey);
+        }
+    };
+    tslib_1.__decorate([
+        autobind
+    ], PivotBar.prototype, "_onDropDownSelected", null);
+    tslib_1.__decorate([
+        autobind
+    ], PivotBar.prototype, "_renderPivotItem", null);
+    tslib_1.__decorate([
+        autobind
+    ], PivotBar.prototype, "_onShowFilterBarClicked", null);
+    tslib_1.__decorate([
+        autobind
+    ], PivotBar.prototype, "_onFilterApplied", null);
+    tslib_1.__decorate([
+        autobind
+    ], PivotBar.prototype, "_onContributedPivotsChanged", null);
+    tslib_1.__decorate([
+        autobind
+    ], PivotBar.prototype, "_onViewOptionChanged", null);
+    tslib_1.__decorate([
+        autobind
+    ], PivotBar.prototype, "_makeIPivotBarItemFromContribution", null);
+    return PivotBar;
+}(BaseComponent));
+export { PivotBar };
+var PivotActionsManager = /** @class */ (function () {
+    function PivotActionsManager() {
+        this._commands = {};
+        this._viewActions = {};
+    }
+    PivotActionsManager.prototype.getCommandObservables = function (pivotBarCommands, selectedPivot, reset) {
+        if (reset === void 0) { reset = false; }
+        var selectedPivotId = selectedPivot.id;
+        if (reset === true) {
+            delete this._commands[selectedPivotId];
+        }
+        if (!this._commands[selectedPivotId]) {
+            var commands_1 = [];
+            this._commands[selectedPivotId] = commands_1;
+            // Add hub commands first
+            commands_1.push(ObservableLike.isObservable(pivotBarCommands) ? pivotBarCommands : new ObservableArray(pivotBarCommands));
+            // Add commands from the selected pivot
+            commands_1.push(ObservableLike.isObservable(selectedPivot.commands) ? selectedPivot.commands : new ObservableArray(selectedPivot.commands));
+            // Add contributed commands
+            if (selectedPivot.commandProviders) {
+                selectedPivot.commandProviders.forEach(function (commandProvider) {
+                    var contributedCommands = new ContributedItemArray(commandProvider, function (command) { return command; });
+                    commands_1.push(contributedCommands);
+                });
+            }
+        }
+        return this._commands[selectedPivotId];
+    };
+    PivotActionsManager.prototype.getViewActionObservables = function (pivotBarViewActions, selectedPivot, reset) {
+        if (reset === void 0) { reset = false; }
+        var selectedPivotId = selectedPivot.id;
+        if (reset === true) {
+            delete this._viewActions[selectedPivotId];
+        }
+        if (!this._viewActions[selectedPivotId]) {
+            var viewActions_1 = [];
+            this._viewActions[selectedPivotId] = viewActions_1;
+            // Add view actions from the selected pivot first
+            viewActions_1.push(ObservableLike.isObservable(selectedPivot.viewActions) ? selectedPivot.viewActions : new ObservableArray(selectedPivot.viewActions));
+            // Add contributed view actions
+            if (selectedPivot.viewActionProviders) {
+                selectedPivot.viewActionProviders.forEach(function (viewActionProvider) {
+                    var contributedViewActions = new ContributedItemArray(viewActionProvider, function (viewAction) { return viewAction; });
+                    viewActions_1.push(contributedViewActions);
+                });
+            }
+            // Add hub view actions
+            viewActions_1.push(ObservableLike.isObservable(pivotBarViewActions) ? pivotBarViewActions : new ObservableArray(pivotBarViewActions));
+        }
+        return this._viewActions[selectedPivotId];
+    };
+    PivotActionsManager.prototype.dispose = function () {
+        this._commands = null;
+        this._viewActions = null;
+    };
+    return PivotActionsManager;
+}());

Components/PivotBar/PivotBarAction.js

@@ -1,1 +0,566 @@
-function mapActionsToVisualizations(t,e,o,i){for(var n=[],r=0,a=t||[];r<a.length;r++){var s=a[r],c=VisualizationRegistration.getInstance(e,s.actionType||0);n=n.concat(c.getVisualization(s,o,i))}return n.forEach(function(t){t.className=css(t.className,commandBarItemClassName)}),n}function setViewOption(t,e,o,i,n){t?t.setViewOption(e,o):"function"==typeof n.onClick&&n.onClick(i,n)}import*as tslib_1 from"tslib";import*as React from"react";import{CommandButton}from"office-ui-fabric-react/lib/Button";import{ContextualMenu,ContextualMenuItemType}from"office-ui-fabric-react/lib/ContextualMenu";import{FocusZone,FocusZoneDirection}from"office-ui-fabric-react/lib/FocusZone";import{IconType}from"office-ui-fabric-react/lib/Icon";import{Slider}from"office-ui-fabric-react/lib/Slider";import{Toggle}from"office-ui-fabric-react/lib/Toggle";import{TooltipHost}from"office-ui-fabric-react/lib/Tooltip";import{autobind,BaseComponent,css,getRTL,findIndex}from"office-ui-fabric-react/lib/Utilities";import{DynamicText}from"../../Dynamic";import{VssIcon}from"../../VssIcon";import*as VSSUI_Resources from"../../Resources/VSS.Resources.VSSUI";var PivotBarActionArea,commandBarItemClassName="vss-PivotBar--commandBar-item";!function(t){t[t.Bar=0]="Bar",t[t.Overflow=1]="Overflow"}(PivotBarActionArea||(PivotBarActionArea={}));export function mapActionsToItems(t,e,o){return mapActionsToVisualizations(t,PivotBarActionArea.Bar,e,o)};export function mapItemToActions(t){var e=t.iconProps.iconType,o=e===IconType.default||e===IconType.Default?0:3,i={key:t.key,name:t.name,href:t.href,title:t.title,iconProps:tslib_1.__assign({},t.iconProps,{iconType:o}),onClick:t.onClick,disabled:t.disabled,important:t.important,target:t.target,separator:t.itemType===ContextualMenuItemType.Divider};return t.items&&(i.children=t.items.map(mapItemToActions)),i};var VisualizationRegistration;!function(t){function e(t,e){return t+":"+e}var o={};t.register=function(t,i,n){var r=e(t,i);o[r]=n},t.getInstance=function(t,i){var n=e(t,i),r=o[n];if(!r)throw new Error("No visualization found for area "+t+" and action type "+i);return new r}}(VisualizationRegistration||(VisualizationRegistration={}));var CommandVisualization=function(){function t(){}return t.prototype.getVisualization=function(t,e){var o={key:t.key,name:t.name||"",ariaLabel:t.ariaLabel,title:t.title,onClick:t.onClick,href:t.href,disabled:t.disabled,target:t.target,itemType:t.separator?ContextualMenuItemType.Divider:ContextualMenuItemType.Normal};if(t.iconProps){var i=tslib_1.__assign({},t.iconProps);i.className=css(i.className,"vss-PivotBar--commandBar-icon"),o.iconProps=VssIcon.getIconProps(i)}return Array.isArray(t.children)&&(o.subMenuProps={className:"vss-PivotBar--commandBar-overflow",items:mapActionsToVisualizations(t.children,PivotBarActionArea.Overflow,e)}),[o]},t}();VisualizationRegistration.register(PivotBarActionArea.Bar,0,CommandVisualization),VisualizationRegistration.register(PivotBarActionArea.Overflow,0,CommandVisualization);var OnOffVisualization=function(){function t(){}return t.prototype.getVisualization=function(t,e){return[]},t.prototype.getActionProps=function(t){return t.actionProps||(t.actionProps={on:!1}),t.actionProps},t.prototype.isOn=function(t,e){return!!e&&!0===e.getViewOption(t)},t}(),OnOffBarVisualization=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return tslib_1.__extends(e,t),e.prototype.getVisualization=function(t,e,o){var i=this,n=this.getActionProps(t),r=this.isOn(t.key,e),a="";!1!==n.showText&&(a=r?VSSUI_Resources.PivotBarViewActionOnText:VSSUI_Resources.PivotBarViewActionOffText);var s={key:t.key,name:a,ariaLabel:r?n.onAriaLabel:n.offAriaLabel,title:t.title,disabled:t.disabled,onClick:function(n,r){setViewOption(e,t.key,!i.isOn(t.key,e),n,t),o&&o()}};a||void 0!==s.title||(s.title=s.ariaLabel);var c=r?n.onIconProps:n.offIconProps;return c||(c=t.iconProps),c&&(s.iconProps=VssIcon.getIconProps(c)),[s]},e}(OnOffVisualization);VisualizationRegistration.register(PivotBarActionArea.Bar,1,OnOffBarVisualization);var OnOffOverflowVisualization=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return tslib_1.__extends(e,t),e.prototype.getVisualization=function(t,e){var o=this.getActionProps(t),i=this.isOn(t.key,e),n=[];return t.name&&n.push({key:t.key+"-header",name:t.name,itemType:ContextualMenuItemType.Header}),n.push({key:t.key,onRender:function(n){return React.createElement(Toggle,{key:t.key+"-toggle",className:"vss-PivotBar--commandBar-toggle",styles:{root:{paddingLeft:8,marginTop:4},container:{alignItems:"center"},pill:{fontSize:"15px"}},defaultChecked:i,disabled:t.disabled,onText:o.onText||VSSUI_Resources.PivotBarViewActionOnText,offText:o.offText||VSSUI_Resources.PivotBarViewActionOffText,onAriaLabel:o.onAriaLabel,offAriaLabel:o.offAriaLabel,title:t.title,onChanged:function(o){setViewOption(e,n.key,o,null,t)}})}}),n},e}(OnOffVisualization);VisualizationRegistration.register(PivotBarActionArea.Overflow,1,OnOffOverflowVisualization);var ChoiceGroupVisualization=function(){function t(){}return t.prototype.getVisualization=function(t,e){return[]},t.prototype.getActionProps=function(t){if(!t.actionProps)throw new Error("Options must be specified for the choice group "+t.key);return t.actionProps},t.prototype.getSelectedOption=function(t,e,o){var i=o?o.getViewOption(t):null;return e.options.filter(function(t){return t.key===i})[0]||e.options[0]},t}(),ChoiceGroupButton=function(t){function e(e){var o=t.call(this,e)||this;return o.state={showDropdown:!1,selectedOptionIndex:o._getSelectedOptionIndex(o.props.options,o.props.defaultSelectedKey)},o}return tslib_1.__extends(e,t),e.prototype.componentWillReceiveProps=function(t){this.setState({showDropdown:!1,selectedOptionIndex:this._getSelectedOptionIndex(t.options,t.defaultSelectedKey)})},e.prototype.render=function(){var t=this,e=this.props,o=e.cycleButtonClassName,i=e.dropButtonClassName,n=e.separatorClassName,r=e.ariaLabel,a=e.dropButtonAriaLabel,s=e.options,c=this.state,u=c.selectedOptionIndex,l=c.showDropdown,p=c.dropTarget,f=s[u];return React.createElement("div",{className:"vss-ChoiceGroupButton"},React.createElement(CommandButton,{ariaLabel:r,className:css("vss-ChoiceGroupButton--text",o),onClick:this._onCycleClick},f.text),React.createElement("span",{className:css("vss-ChoiceGroupButton--separator",n)}),React.createElement(CommandButton,{ariaLabel:a||VSSUI_Resources.PivotBarMoreOptionsAriaLabel,className:css("vss-ChoiceGroupButton--drop",i),iconProps:{iconName:"ChevronDown"},onClick:this._onDropClick}),l?React.createElement(ContextualMenu,{shouldFocusOnMount:!0,isBeakVisible:!1,target:p,onDismiss:this._onDismiss,directionalHint:getRTL()?4:6,items:s.map(function(e){return{key:e.key,name:e.text,ariaLabel:e.ariaLabel,iconProps:e===f?{iconName:"CheckMark"}:void 0,onClick:t._onOptionClick}})}):null)},e.prototype._getSelectedOptionIndex=function(t,e){void 0===e&&(e=null);var o=e?findIndex(t,function(t){return t.key===e}):-1;return Math.max(o,0)},e.prototype._getNextOptionIndex=function(t){var e=this.state.selectedOptionIndex+1;return e===t.length&&(e=0),e},e.prototype._changeOption=function(t,e){var o=this.props,i=o.onChange,n=o.options;this.setState({selectedOptionIndex:e}),i&&i(t,n[e])},e.prototype._onCycleClick=function(t){this._changeOption(t,this._getNextOptionIndex(this.props.options))},e.prototype._onOptionClick=function(t,e){t.stopPropagation(),this._changeOption(t,findIndex(this.props.options,function(t){return t.key===e.key}))},e.prototype._onDropClick=function(t){this.setState({showDropdown:!0,dropTarget:t.currentTarget})},e.prototype._onDismiss=function(t){this.setState({showDropdown:!1})},tslib_1.__decorate([autobind],e.prototype,"_onCycleClick",null),tslib_1.__decorate([autobind],e.prototype,"_onOptionClick",null),tslib_1.__decorate([autobind],e.prototype,"_onDropClick",null),tslib_1.__decorate([autobind],e.prototype,"_onDismiss",null),e}(BaseComponent),ChoiceGroupBarVisualization=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return tslib_1.__extends(e,t),e.prototype.getVisualization=function(t,e){var o=this.getActionProps(t),i=this.getSelectedOption(t.key,o,e);return[{key:t.key,className:"vss-PivotBar--commandBar-barChoiceGroup",onRender:function(n){return React.createElement(ChoiceGroupButton,{ariaLabel:n.ariaLabel,dropButtonAriaLabel:o.dropButtonAriaLabel,defaultSelectedKey:i.key,options:o.options,cycleButtonClassName:"vss-PivotBar--commandBar-barChoiceCycle",dropButtonClassName:"vss-PivotBar--commandBar-barChoiceDrop",onChange:function(o,i){setViewOption(e,t.key,i.key,o,t)}})}}]},e}(ChoiceGroupVisualization);VisualizationRegistration.register(PivotBarActionArea.Bar,2,ChoiceGroupBarVisualization);var ChoiceGroupOverflowVisualization=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return tslib_1.__extends(e,t),e.prototype.getVisualization=function(t,e){var o=this.getActionProps(t),i=this.getSelectedOption(t.key,o,e),n=[];t.name&&n.push({key:t.key+"-header",name:t.name,itemType:ContextualMenuItemType.Header});for(var r=0,a=o.options;r<a.length;r++){var s=a[r];n.push({key:s.key,name:s.text,ariaLabel:s.ariaLabel,iconProps:s===i?{iconName:"CheckMark"}:void 0,onClick:function(o,i){setViewOption(e,t.key,i.key,o,t)}})}return n},e}(ChoiceGroupVisualization);VisualizationRegistration.register(PivotBarActionArea.Overflow,2,ChoiceGroupOverflowVisualization);var TextVisualization=function(){function t(){}return t.prototype.getActionProps=function(t){var e=t.actionProps;if(!e||!e.text)throw new Error("Text must be specified through actionProps for "+t.key);return e},t.prototype.getVisualization=function(t,e){var o=this.getActionProps(t);return[{key:t.key,className:"vss-PivotBar--commandBar-text",onRender:function(e){return React.createElement(DynamicText,{key:t.key+"-text",text:o.text})}}]},t}();VisualizationRegistration.register(PivotBarActionArea.Bar,3,TextVisualization),VisualizationRegistration.register(PivotBarActionArea.Overflow,3,TextVisualization);var PivotBarSlider=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return tslib_1.__extends(e,t),e.prototype.render=function(){var t=this;return React.createElement(TooltipHost,{content:this.props.title},React.createElement("div",{ref:function(e){return t._outerFocus=e},onKeyDown:this._onOuterKeyDown,"data-is-focusable":!0,className:"vss-PivotBarSlider"},React.createElement(FocusZone,{componentRef:function(e){return t._innerFocus=e},onKeyDown:this._onInnerKeyDown,direction:FocusZoneDirection.horizontal},React.createElement(Slider,tslib_1.__assign({},this.props)))))},e.prototype._onOuterKeyDown=function(t){13===t.which&&this._innerFocus&&(this._innerFocus.focus(),t.preventDefault(),t.stopPropagation())},e.prototype._onInnerKeyDown=function(t){27===t.which&&this._outerFocus&&(this._outerFocus.focus(),t.preventDefault(),t.stopPropagation())},tslib_1.__decorate([autobind],e.prototype,"_onOuterKeyDown",null),tslib_1.__decorate([autobind],e.prototype,"_onInnerKeyDown",null),e}(BaseComponent),SliderVisualization=function(){function t(){}return t.prototype.getActionProps=function(t){return t.actionProps||(t.actionProps={}),t.actionProps},t.prototype.getValue=function(t,e){return e?e.getViewOption(t)||0:0},Object.defineProperty(t.prototype,"useLabel",{get:function(){return!0},enumerable:!0,configurable:!0}),t.prototype.getVisualization=function(t,e){var o=this,i=this.getActionProps(t),n=this.getValue(t.key,e);return[{key:t.key,className:"vss-PivotBar--commandBar-barSlider",onRender:function(r){return React.createElement(PivotBarSlider,{key:t.key+"-slider",className:"vss-PivotBar--commandBar-slider",label:o.useLabel?t.name:void 0,value:n,min:i.minValue,max:i.maxValue,step:i.step,ariaLabel:t.ariaLabel,title:t.title,showValue:!1,disabled:t.disabled,onChange:function(o){setViewOption(e,t.key,o,null,t)}})}}]},t}(),SliderBarVisualization=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return tslib_1.__extends(e,t),e}(SliderVisualization);VisualizationRegistration.register(PivotBarActionArea.Bar,4,SliderBarVisualization);var SliderOverflowVisualization=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return tslib_1.__extends(e,t),Object.defineProperty(e.prototype,"useLabel",{get:function(){return!1},enumerable:!0,configurable:!0}),e.prototype.getVisualization=function(e,o){var i=t.prototype.getVisualization.call(this,e,o);return e.name&&i.unshift({key:e.key+"-header",name:e.name,itemType:ContextualMenuItemType.Header}),i},e}(SliderVisualization);VisualizationRegistration.register(PivotBarActionArea.Overflow,4,SliderOverflowVisualization);
+import * as tslib_1 from "tslib";
+import * as React from "react";
+import { CommandButton } from 'office-ui-fabric-react/lib/Button';
+import { ContextualMenu, ContextualMenuItemType } from 'office-ui-fabric-react/lib/ContextualMenu';
+import { FocusZone, FocusZoneDirection } from 'office-ui-fabric-react/lib/FocusZone';
+import { IconType } from 'office-ui-fabric-react/lib/Icon';
+import { Slider } from 'office-ui-fabric-react/lib/Slider';
+import { Toggle } from 'office-ui-fabric-react/lib/Toggle';
+import { TooltipHost } from 'office-ui-fabric-react/lib/Tooltip';
+import { autobind, BaseComponent, css, getRTL, findIndex } from 'office-ui-fabric-react/lib/Utilities';
+import { DynamicText } from '../../Dynamic';
+import { VssIcon } from '../../VssIcon';
+import * as VSSUI_Resources from '../../Resources/VSS.Resources.VSSUI';
+var commandBarItemClassName = 'vss-PivotBar--commandBar-item';
+/**
+ * Internal enum determining where to render the visualization representing the action.
+ */
+var PivotBarActionArea;
+(function (PivotBarActionArea) {
+    /**
+     * Area where all the actions are visible by default.
+     */
+    PivotBarActionArea[PivotBarActionArea["Bar"] = 0] = "Bar";
+    /**
+     * Area where the actions are hidden by default and exist inside an overflow menu.
+     */
+    PivotBarActionArea[PivotBarActionArea["Overflow"] = 1] = "Overflow";
+})(PivotBarActionArea || (PivotBarActionArea = {}));
+;
+/**
+ * Converts the specified actions to visual elements (IContextualMenuItem on the CommandBar).
+ * @param actions List if actions to convert.
+ * @param viewOptions View options to operate on.
+ * @param forceUpdate Callback to force a rerender of the visualizations
+ */
+export function mapActionsToItems(actions, viewOptions, forceUpdate) {
+    return mapActionsToVisualizations(actions, PivotBarActionArea.Bar, viewOptions, forceUpdate);
+}
+/**
+ * Converts an IContextualMenuItem to an IPivotBarAction
+ * @param menuItem
+ */
+export function mapItemToActions(menuItem) {
+    var menuItemIconType = menuItem.iconProps.iconType;
+    var pivotBarActionIconType = menuItemIconType === IconType.default || menuItemIconType === IconType.Default ? 0 /* fabric */ : 3 /* image */;
+    var action = {
+        key: menuItem.key,
+        name: menuItem.name,
+        href: menuItem.href,
+        title: menuItem.title,
+        iconProps: tslib_1.__assign({}, menuItem.iconProps, { iconType: pivotBarActionIconType }),
+        onClick: menuItem.onClick,
+        disabled: menuItem.disabled,
+        important: menuItem.important,
+        target: menuItem.target,
+        separator: menuItem.itemType === ContextualMenuItemType.Divider,
+    };
+    if (menuItem.items) {
+        action.children = menuItem.items.map(mapItemToActions);
+    }
+    return action;
+}
+/**
+ * Internal mapping from action to action representation.
+ * @param actions List if actions to convert.
+ * @param area Container action of the action.
+ * @param viewOptions View options to operate on.
+ * @param forceUpdate Callback to force a rerender of the visualizations
+ */
+function mapActionsToVisualizations(actions, area, viewOptions, forceUpdate) {
+    var items = [];
+    for (var _i = 0, _a = actions || []; _i < _a.length; _i++) {
+        var action = _a[_i];
+        var actionVisualization = VisualizationRegistration.getInstance(area, action.actionType || 0 /* Command */);
+        items = items.concat(actionVisualization.getVisualization(action, viewOptions, forceUpdate));
+    }
+    // Mark all CommandBar items with our class name
+    items.forEach(function (item) {
+        item.className = css(item.className, commandBarItemClassName);
+    });
+    return items;
+}
+function setViewOption(viewOptions, key, value, event, action) {
+    if (viewOptions) {
+        viewOptions.setViewOption(key, value);
+    }
+    else if (typeof action.onClick === 'function') {
+        action.onClick(event, action);
+    }
+}
+var VisualizationRegistration;
+(function (VisualizationRegistration) {
+    var actionVisualizations = {};
+    function getKey(area, actionType) {
+        return area + ":" + actionType;
+    }
+    function register(area, actionType, visualizationType) {
+        var key = getKey(area, actionType);
+        actionVisualizations[key] = visualizationType;
+    }
+    VisualizationRegistration.register = register;
+    function getInstance(area, actionType) {
+        var key = getKey(area, actionType);
+        var visualizationType = actionVisualizations[key];
+        if (!visualizationType) {
+            throw new Error("No visualization found for area " + area + " and action type " + actionType);
+        }
+        // Return the instance of the visualization
+        return new visualizationType();
+    }
+    VisualizationRegistration.getInstance = getInstance;
+})(VisualizationRegistration || (VisualizationRegistration = {}));
+/**
+ * Command visualization which is same for both bar and overflow areas.
+ */
+var CommandVisualization = /** @class */ (function () {
+    function CommandVisualization() {
+    }
+    CommandVisualization.prototype.getVisualization = function (action, viewOptions) {
+        var item = {
+            key: action.key,
+            name: action.name || '',
+            ariaLabel: action.ariaLabel,
+            title: action.title,
+            onClick: action.onClick,
+            href: action.href,
+            disabled: action.disabled,
+            target: action.target,
+            itemType: action.separator ? ContextualMenuItemType.Divider : ContextualMenuItemType.Normal,
+        };
+        if (action.iconProps) {
+            var iconProps = tslib_1.__assign({}, action.iconProps);
+            iconProps.className = css(iconProps.className, 'vss-PivotBar--commandBar-icon');
+            item.iconProps = VssIcon.getIconProps(iconProps);
+        }
+        // Default view action may have child actions
+        if (Array.isArray(action.children)) {
+            item.subMenuProps = {
+                className: 'vss-PivotBar--commandBar-overflow',
+                items: mapActionsToVisualizations(action.children, PivotBarActionArea.Overflow, viewOptions)
+            };
+        }
+        return [item];
+    };
+    return CommandVisualization;
+}());
+VisualizationRegistration.register(PivotBarActionArea.Bar, 0 /* Command */, CommandVisualization);
+VisualizationRegistration.register(PivotBarActionArea.Overflow, 0 /* Command */, CommandVisualization);
+/**
+ * Base visualization for OnOff view action.
+ */
+var OnOffVisualization = /** @class */ (function () {
+    function OnOffVisualization() {
+    }
+    OnOffVisualization.prototype.getVisualization = function (action, viewOptions) {
+        return [];
+    };
+    OnOffVisualization.prototype.getActionProps = function (action) {
+        if (!action.actionProps) {
+            action.actionProps = { on: false };
+        }
+        return action.actionProps;
+    };
+    OnOffVisualization.prototype.isOn = function (key, viewOptions) {
+        return viewOptions ? viewOptions.getViewOption(key) === true : false;
+    };
+    return OnOffVisualization;
+}());
+/**
+ * OnOff visualization for bar area.
+ */
+var OnOffBarVisualization = /** @class */ (function (_super) {
+    tslib_1.__extends(OnOffBarVisualization, _super);
+    function OnOffBarVisualization() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    OnOffBarVisualization.prototype.getVisualization = function (action, viewOptions, forceUpdate) {
+        var _this = this;
+        var actionProps = this.getActionProps(action);
+        var isOn = this.isOn(action.key, viewOptions);
+        var itemName = '';
+        if (actionProps.showText !== false) {
+            itemName = isOn ? VSSUI_Resources.PivotBarViewActionOnText : VSSUI_Resources.PivotBarViewActionOffText;
+        }
+        var item = {
+            key: action.key,
+            name: itemName,
+            ariaLabel: isOn ? actionProps.onAriaLabel : actionProps.offAriaLabel,
+            title: action.title,
+            disabled: action.disabled,
+            onClick: function (ev, clickedItem) {
+                setViewOption(viewOptions, action.key, !_this.isOn(action.key, viewOptions), ev, action);
+                forceUpdate && forceUpdate();
+            },
+        };
+        if (!itemName && item.title === undefined) {
+            item.title = item.ariaLabel;
+        }
+        // Try to get the icon from the action props first
+        var iconProps = isOn ? actionProps.onIconProps : actionProps.offIconProps;
+        // It might be specified to the view action directly
+        if (!iconProps) {
+            iconProps = action.iconProps;
+        }
+        if (iconProps) {
+            item.iconProps = VssIcon.getIconProps(iconProps);
+        }
+        return [item];
+    };
+    return OnOffBarVisualization;
+}(OnOffVisualization));
+VisualizationRegistration.register(PivotBarActionArea.Bar, 1 /* OnOff */, OnOffBarVisualization);
+/**
+ * OnOff visualization for overflow area.
+ */
+var OnOffOverflowVisualization = /** @class */ (function (_super) {
+    tslib_1.__extends(OnOffOverflowVisualization, _super);
+    function OnOffOverflowVisualization() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    OnOffOverflowVisualization.prototype.getVisualization = function (action, viewOptions) {
+        var actionProps = this.getActionProps(action);
+        var isOn = this.isOn(action.key, viewOptions);
+        var items = [];
+        // Add header for the toggle inside a popup
+        if (action.name) {
+            items.push({
+                key: action.key + "-header",
+                name: action.name,
+                itemType: ContextualMenuItemType.Header
+            });
+        }
+        // Add an item with a custom rendering which uses a Toggle component
+        items.push({
+            key: action.key,
+            onRender: function (item) {
+                return (React.createElement(Toggle, { key: action.key + "-toggle", className: 'vss-PivotBar--commandBar-toggle', styles: { root: { paddingLeft: 8, marginTop: 4 }, container: { alignItems: 'center' }, pill: { fontSize: '15px' } }, defaultChecked: isOn, disabled: action.disabled, onText: actionProps.onText || VSSUI_Resources.PivotBarViewActionOnText, offText: actionProps.offText || VSSUI_Resources.PivotBarViewActionOffText, onAriaLabel: actionProps.onAriaLabel, offAriaLabel: actionProps.offAriaLabel, title: action.title, onChanged: function (on) {
+                        setViewOption(viewOptions, item.key, on, null, action);
+                    } }));
+            }
+        });
+        return items;
+    };
+    return OnOffOverflowVisualization;
+}(OnOffVisualization));
+VisualizationRegistration.register(PivotBarActionArea.Overflow, 1 /* OnOff */, OnOffOverflowVisualization);
+/**
+ * Base visualization for ChoiceGroup view action.
+ */
+var ChoiceGroupVisualization = /** @class */ (function () {
+    function ChoiceGroupVisualization() {
+    }
+    ChoiceGroupVisualization.prototype.getVisualization = function (action, viewOptions) {
+        return [];
+    };
+    ChoiceGroupVisualization.prototype.getActionProps = function (action) {
+        if (!action.actionProps) {
+            throw new Error("Options must be specified for the choice group " + action.key);
+        }
+        return action.actionProps;
+    };
+    ChoiceGroupVisualization.prototype.getSelectedOption = function (key, actionProps, viewOptions) {
+        var selectedOptionKey = viewOptions ? viewOptions.getViewOption(key) : null;
+        return (actionProps.options.filter(function (o) { return o.key === selectedOptionKey; })[0] ||
+            actionProps.options[0]);
+    };
+    return ChoiceGroupVisualization;
+}());
+/**
+ * A customized split button variation, which enables to select an option from a list of options when drop section is clicked.
+ * Clicking button section will cycle through all available options.
+ */
+var ChoiceGroupButton = /** @class */ (function (_super) {
+    tslib_1.__extends(ChoiceGroupButton, _super);
+    function ChoiceGroupButton(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {
+            showDropdown: false,
+            selectedOptionIndex: _this._getSelectedOptionIndex(_this.props.options, _this.props.defaultSelectedKey)
+        };
+        return _this;
+    }
+    ChoiceGroupButton.prototype.componentWillReceiveProps = function (nextProps) {
+        this.setState({
+            showDropdown: false,
+            selectedOptionIndex: this._getSelectedOptionIndex(nextProps.options, nextProps.defaultSelectedKey)
+        });
+    };
+    ChoiceGroupButton.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, cycleButtonClassName = _a.cycleButtonClassName, dropButtonClassName = _a.dropButtonClassName, separatorClassName = _a.separatorClassName, ariaLabel = _a.ariaLabel, dropButtonAriaLabel = _a.dropButtonAriaLabel, options = _a.options;
+        var _b = this.state, selectedOptionIndex = _b.selectedOptionIndex, showDropdown = _b.showDropdown, dropTarget = _b.dropTarget;
+        var selectedOption = options[selectedOptionIndex];
+        return (React.createElement("div", { className: 'vss-ChoiceGroupButton' },
+            React.createElement(CommandButton, { ariaLabel: ariaLabel, className: css("vss-ChoiceGroupButton--text", cycleButtonClassName), onClick: this._onCycleClick }, selectedOption.text),
+            React.createElement("span", { className: css("vss-ChoiceGroupButton--separator", separatorClassName) }),
+            React.createElement(CommandButton, { ariaLabel: dropButtonAriaLabel || VSSUI_Resources.PivotBarMoreOptionsAriaLabel, className: css("vss-ChoiceGroupButton--drop", dropButtonClassName), iconProps: { iconName: "ChevronDown" }, onClick: this._onDropClick }),
+            showDropdown ? (React.createElement(ContextualMenu, { shouldFocusOnMount: true, isBeakVisible: false, target: dropTarget, onDismiss: this._onDismiss, directionalHint: getRTL() ? 4 /* bottomLeftEdge */ : 6 /* bottomRightEdge */, items: options.map(function (o) {
+                    return {
+                        key: o.key,
+                        name: o.text,
+                        ariaLabel: o.ariaLabel,
+                        iconProps: o === selectedOption ? { iconName: 'CheckMark' } : undefined,
+                        onClick: _this._onOptionClick
+                    };
+                }) })) : (null)));
+    };
+    ChoiceGroupButton.prototype._getSelectedOptionIndex = function (options, defaultSelectedKey) {
+        if (defaultSelectedKey === void 0) { defaultSelectedKey = null; }
+        var selectedOptionIndex = defaultSelectedKey ? findIndex(options, function (o) { return o.key === defaultSelectedKey; }) : -1;
+        return Math.max(selectedOptionIndex, 0);
+    };
+    ChoiceGroupButton.prototype._getNextOptionIndex = function (options) {
+        var nextOptionIndex = this.state.selectedOptionIndex + 1;
+        if (nextOptionIndex === options.length) {
+            nextOptionIndex = 0;
+        }
+        return nextOptionIndex;
+    };
+    ChoiceGroupButton.prototype._changeOption = function (ev, index) {
+        var _a = this.props, onChange = _a.onChange, options = _a.options;
+        this.setState({ selectedOptionIndex: index });
+        if (onChange) {
+            onChange(ev, options[index]);
+        }
+    };
+    ChoiceGroupButton.prototype._onCycleClick = function (ev) {
+        this._changeOption(ev, this._getNextOptionIndex(this.props.options));
+    };
+    ChoiceGroupButton.prototype._onOptionClick = function (ev, item) {
+        ev.stopPropagation();
+        this._changeOption(ev, findIndex(this.props.options, function (o) { return o.key === item.key; }));
+    };
+    ChoiceGroupButton.prototype._onDropClick = function (ev) {
+        this.setState({
+            showDropdown: true,
+            dropTarget: ev.currentTarget
+        });
+    };
+    ChoiceGroupButton.prototype._onDismiss = function (event) {
+        this.setState({ showDropdown: false });
+    };
+    tslib_1.__decorate([
+        autobind
+    ], ChoiceGroupButton.prototype, "_onCycleClick", null);
+    tslib_1.__decorate([
+        autobind
+    ], ChoiceGroupButton.prototype, "_onOptionClick", null);
+    tslib_1.__decorate([
+        autobind
+    ], ChoiceGroupButton.prototype, "_onDropClick", null);
+    tslib_1.__decorate([
+        autobind
+    ], ChoiceGroupButton.prototype, "_onDismiss", null);
+    return ChoiceGroupButton;
+}(BaseComponent));
+/**
+ * ChoiceGroup visualization for bar area.
+ */
+var ChoiceGroupBarVisualization = /** @class */ (function (_super) {
+    tslib_1.__extends(ChoiceGroupBarVisualization, _super);
+    function ChoiceGroupBarVisualization() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    ChoiceGroupBarVisualization.prototype.getVisualization = function (action, viewOptions) {
+        var actionProps = this.getActionProps(action);
+        var selectedOption = this.getSelectedOption(action.key, actionProps, viewOptions);
+        // Add item for the selected option which is always visible
+        return [{
+                key: action.key,
+                className: 'vss-PivotBar--commandBar-barChoiceGroup',
+                onRender: function (item) {
+                    return (React.createElement(ChoiceGroupButton, { ariaLabel: item.ariaLabel, dropButtonAriaLabel: actionProps.dropButtonAriaLabel, defaultSelectedKey: selectedOption.key, options: actionProps.options, cycleButtonClassName: 'vss-PivotBar--commandBar-barChoiceCycle', dropButtonClassName: 'vss-PivotBar--commandBar-barChoiceDrop', onChange: function (ev, option) {
+                            setViewOption(viewOptions, action.key, option.key, ev, action);
+                        } }));
+                }
+            }];
+    };
+    return ChoiceGroupBarVisualization;
+}(ChoiceGroupVisualization));
+VisualizationRegistration.register(PivotBarActionArea.Bar, 2 /* ChoiceGroup */, ChoiceGroupBarVisualization);
+/**
+ * ChoiceGroup visualization for overflow area.
+ */
+var ChoiceGroupOverflowVisualization = /** @class */ (function (_super) {
+    tslib_1.__extends(ChoiceGroupOverflowVisualization, _super);
+    function ChoiceGroupOverflowVisualization() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    ChoiceGroupOverflowVisualization.prototype.getVisualization = function (action, viewOptions) {
+        var actionProps = this.getActionProps(action);
+        var selectedOption = this.getSelectedOption(action.key, actionProps, viewOptions);
+        var items = [];
+        // Add header for the choice group inside a popup
+        if (action.name) {
+            items.push({
+                key: action.key + "-header",
+                name: action.name,
+                itemType: ContextualMenuItemType.Header
+            });
+        }
+        // Add each option individually
+        for (var _i = 0, _a = actionProps.options; _i < _a.length; _i++) {
+            var option = _a[_i];
+            items.push({
+                key: option.key,
+                name: option.text,
+                ariaLabel: option.ariaLabel,
+                iconProps: option === selectedOption ? { iconName: 'CheckMark' } : undefined,
+                onClick: function (ev, item) {
+                    setViewOption(viewOptions, action.key, item.key, ev, action);
+                }
+            });
+        }
+        return items;
+    };
+    return ChoiceGroupOverflowVisualization;
+}(ChoiceGroupVisualization));
+VisualizationRegistration.register(PivotBarActionArea.Overflow, 2 /* ChoiceGroup */, ChoiceGroupOverflowVisualization);
+/**
+ * Text visualization for both bar and overflow areas.
+ */
+var TextVisualization = /** @class */ (function () {
+    function TextVisualization() {
+    }
+    TextVisualization.prototype.getActionProps = function (action) {
+        var actionProps = action.actionProps;
+        if (!actionProps || !actionProps.text) {
+            throw new Error("Text must be specified through actionProps for " + action.key);
+        }
+        return actionProps;
+    };
+    TextVisualization.prototype.getVisualization = function (action, viewOptions) {
+        var actionProps = this.getActionProps(action);
+        return [
+            {
+                key: action.key,
+                className: 'vss-PivotBar--commandBar-text',
+                onRender: function (item) {
+                    return (React.createElement(DynamicText, { key: action.key + "-text", text: actionProps.text }));
+                }
+            }
+        ];
+    };
+    return TextVisualization;
+}());
+VisualizationRegistration.register(PivotBarActionArea.Bar, 3 /* Text */, TextVisualization);
+VisualizationRegistration.register(PivotBarActionArea.Overflow, 3 /* Text */, TextVisualization);
+var PivotBarSlider = /** @class */ (function (_super) {
+    tslib_1.__extends(PivotBarSlider, _super);
+    function PivotBarSlider() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    PivotBarSlider.prototype.render = function () {
+        var _this = this;
+        return (React.createElement(TooltipHost, { content: this.props.title },
+            React.createElement("div", { ref: function (el) { return _this._outerFocus = el; }, onKeyDown: this._onOuterKeyDown, "data-is-focusable": true, className: 'vss-PivotBarSlider' },
+                React.createElement(FocusZone, { componentRef: function (fz) { return _this._innerFocus = fz; }, onKeyDown: this._onInnerKeyDown, direction: FocusZoneDirection.horizontal },
+                    React.createElement(Slider, tslib_1.__assign({}, this.props))))));
+    };
+    PivotBarSlider.prototype._onOuterKeyDown = function (event) {
+        if (event.which === 13 /* enter */) {
+            if (this._innerFocus) {
+                this._innerFocus.focus();
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        }
+    };
+    PivotBarSlider.prototype._onInnerKeyDown = function (event) {
+        if (event.which === 27 /* escape */) {
+            if (this._outerFocus) {
+                this._outerFocus.focus();
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        }
+    };
+    tslib_1.__decorate([
+        autobind
+    ], PivotBarSlider.prototype, "_onOuterKeyDown", null);
+    tslib_1.__decorate([
+        autobind
+    ], PivotBarSlider.prototype, "_onInnerKeyDown", null);
+    return PivotBarSlider;
+}(BaseComponent));
+/**
+ * Base visualization for Slider view action.
+ */
+var SliderVisualization = /** @class */ (function () {
+    function SliderVisualization() {
+    }
+    SliderVisualization.prototype.getActionProps = function (action) {
+        if (!action.actionProps) {
+            action.actionProps = {};
+        }
+        return action.actionProps;
+    };
+    SliderVisualization.prototype.getValue = function (key, viewOptions) {
+        return viewOptions ? viewOptions.getViewOption(key) || 0 : 0;
+    };
+    Object.defineProperty(SliderVisualization.prototype, "useLabel", {
+        get: function () {
+            return true;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    SliderVisualization.prototype.getVisualization = function (action, viewOptions) {
+        var _this = this;
+        var actionProps = this.getActionProps(action);
+        var value = this.getValue(action.key, viewOptions);
+        // Add item for the selected option which is always visible
+        return [{
+                key: action.key,
+                className: 'vss-PivotBar--commandBar-barSlider',
+                onRender: function (item) {
+                    return (React.createElement(PivotBarSlider, { key: action.key + "-slider", className: 'vss-PivotBar--commandBar-slider', label: _this.useLabel ? action.name : undefined, value: value, min: actionProps.minValue, max: actionProps.maxValue, step: actionProps.step, ariaLabel: action.ariaLabel, title: action.title, showValue: false, disabled: action.disabled, onChange: function (value) {
+                            setViewOption(viewOptions, action.key, value, null, action);
+                        } }));
+                }
+            }];
+    };
+    return SliderVisualization;
+}());
+/**
+ * Slider visualization for bar area.
+ */
+var SliderBarVisualization = /** @class */ (function (_super) {
+    tslib_1.__extends(SliderBarVisualization, _super);
+    function SliderBarVisualization() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return SliderBarVisualization;
+}(SliderVisualization));
+VisualizationRegistration.register(PivotBarActionArea.Bar, 4 /* Slider */, SliderBarVisualization);
+/**
+ * Slider visualization for overflow area.
+ */
+var SliderOverflowVisualization = /** @class */ (function (_super) {
+    tslib_1.__extends(SliderOverflowVisualization, _super);
+    function SliderOverflowVisualization() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Object.defineProperty(SliderOverflowVisualization.prototype, "useLabel", {
+        get: function () {
+            return false;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    SliderOverflowVisualization.prototype.getVisualization = function (action, viewOptions) {
+        var items = _super.prototype.getVisualization.call(this, action, viewOptions);
+        if (action.name) {
+            // For overflow area, add label as a header
+            items.unshift({
+                key: action.key + "-header",
+                name: action.name,
+                itemType: ContextualMenuItemType.Header
+            });
+        }
+        return items;
+    };
+    return SliderOverflowVisualization;
+}(SliderVisualization));
+VisualizationRegistration.register(PivotBarActionArea.Overflow, 4 /* Slider */, SliderOverflowVisualization);

Components/PivotBar/PivotBarItem.js

@@ -1,1 +0,14 @@
-import*as tslib_1 from"tslib";import*as React from"react";import{BaseComponent,css,getNativeProps,divProperties}from"office-ui-fabric-react/lib/Utilities";var PivotBarItem=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("div",tslib_1.__assign({},getNativeProps(this.props,divProperties),{className:css("vss-PivotBarItem",this.props.className)}),this.props.children)},e}(BaseComponent);export{PivotBarItem};
+import * as tslib_1 from "tslib";
+import * as React from "react";
+import { BaseComponent, css, getNativeProps, divProperties } from 'office-ui-fabric-react/lib/Utilities';
+var PivotBarItem = /** @class */ (function (_super) {
+    tslib_1.__extends(PivotBarItem, _super);
+    function PivotBarItem() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    PivotBarItem.prototype.render = function () {
+        return (React.createElement("div", tslib_1.__assign({}, getNativeProps(this.props, divProperties), { className: css('vss-PivotBarItem', this.props.className) }), this.props.children));
+    };
+    return PivotBarItem;
+}(BaseComponent));
+export { PivotBarItem };

Components/PivotBar/PivotCommandBar.js

@@ -1,1 +0,175 @@
-import*as tslib_1 from"tslib";import*as React from"react";import{CommandBar}from"office-ui-fabric-react/lib/CommandBar";import{autobind,BaseComponent,css}from"office-ui-fabric-react/lib/Utilities";import{mapActionsToItems}from"../../Components/PivotBar/PivotBarAction";import{arrayEquals}from"../../Utilities/Internal";import*as VSSUI_Resources from"../../Resources/VSS.Resources.VSSUI";var PivotCommandBar=function(t){function e(e){var o=t.call(this,e)||this;return o.state={commands:o._getCommands(o.props),viewActions:o._getViewActions(o.props)},o}return tslib_1.__extends(e,t),e.prototype.componentWillReceiveProps=function(t){var e=!1;arrayEquals(this.props.commands,t.commands)||(this._unsubscribeItems(this.props.commands,this._onCommandsChanged),this._subscribeItems(t.commands,this._onCommandsChanged),e=!0),arrayEquals(this.props.viewActions,t.viewActions)||(this._unsubscribeItems(this.props.viewActions,this._onViewActionsChanged),this._subscribeItems(t.viewActions,this._onViewActionsChanged),e=!0),this.props.showFilterAction===t.showFilterAction&&this.props.filterBar===t.filterBar||(e=!0),e&&this.setState({commands:this._getCommands(t),viewActions:this._getViewActions(t)})},e.prototype.componentDidMount=function(){this._subscribeItems(this.props.commands,this._onCommandsChanged),this._subscribeItems(this.props.viewActions,this._onViewActionsChanged)},e.prototype.componentWillUnmount=function(){this._unsubscribeItems(this.props.commands,this._onCommandsChanged),this._unsubscribeItems(this.props.viewActions,this._onViewActionsChanged)},e.prototype._subscribeItems=function(t,e){(t||[]).forEach(function(t){return t.subscribe(e)})},e.prototype._unsubscribeItems=function(t,e){(t||[]).forEach(function(t){return t.unsubscribe(e)})},e.prototype.render=function(){var t=this,e=this.props,o=e.className,i=e.viewOptions,s=e.filterBar,n=e.hasAppliedFilter,r=e.showFilterAction,a=e.onShowFilterBarClicked,c=e.showFilterBarViewOptionKey,m=e.prependSeparator,p=this.state,h=p.commands,l=p.viewActions,u=[],d=[];if(h&&h.length){var f=h.filter(function(t){return t.important}),_=h.filter(function(t){return!t.important});u=mapActionsToItems(f,i,this._forceUpdate),d=mapActionsToItems(_,i,this._forceUpdate)}var v=[],b=[];if(l&&l.length&&b.push.apply(b,l.filter(function(t){return t.important&&1===t.viewActionRenderArea})),l&&l.length){var A=l.filter(function(t){return!t.important});A.length&&b.push({key:"viewOptions",name:VSSUI_Resources.PivotBarViewOptionsText,important:!0,actionType:0,iconProps:{iconName:"Equalizer"},children:A})}if(l&&l.length&&b.push.apply(b,l.filter(function(t){return t.important&&1!==t.viewActionRenderArea})),r&&!s){var w=Math.max(b.length-1,0);b.splice(w,0,{key:c,important:!0,actionType:1,actionProps:{showText:!1,onAriaLabel:VSSUI_Resources.PivotBarFilterActionTextHide,offAriaLabel:VSSUI_Resources.PivotBarFilterActionTextShow,onIconProps:{iconName:n?"FilterSolid":"Filter"},offIconProps:{iconName:n?"FilterSolid":"Filter"}},onClick:a})}return v=mapActionsToItems(b,i,this._forceUpdate),s&&v.unshift({className:"vss-PivotBar--inlineFilterBar",key:"filterBar",onRender:function(){return s}}),u.length||d.length||v.length?React.createElement("div",{className:"vss-PivotBar--right"},!(!m||!u.length&&!d.length)&&React.createElement("div",{className:"vss-PivotBar--separator"}),React.createElement(CommandBar,{componentRef:function(e){t._commandBar=e},className:css(o),items:u,overflowItems:d,farItems:v,elipisisAriaLabel:VSSUI_Resources.PivotBarMoreCommandsAriaLabel})):null},e.prototype.focus=function(){this._commandBar&&this._commandBar.focus()},e.prototype._getCommands=function(t){for(var e=[],o=0,i=t.commands||[];o<i.length;o++){var s=i[o];e.push.apply(e,s.items)}return e},e.prototype._getViewActions=function(t){for(var e=[],o=0,i=t.viewActions||[];o<i.length;o++){var s=i[o];e.push.apply(e,s.items)}return e},e.prototype._onCommandsChanged=function(){this.setState({commands:this._getCommands(this.props)})},e.prototype._onViewActionsChanged=function(){this.setState({viewActions:this._getViewActions(this.props)})},e.prototype._forceUpdate=function(){this.forceUpdate()},tslib_1.__decorate([autobind],e.prototype,"_onCommandsChanged",null),tslib_1.__decorate([autobind],e.prototype,"_onViewActionsChanged",null),tslib_1.__decorate([autobind],e.prototype,"_forceUpdate",null),e}(BaseComponent);export{PivotCommandBar};
+import * as tslib_1 from "tslib";
+import * as React from 'react';
+import { CommandBar } from 'office-ui-fabric-react/lib/CommandBar';
+import { autobind, BaseComponent, css } from 'office-ui-fabric-react/lib/Utilities';
+import { mapActionsToItems } from '../../Components/PivotBar/PivotBarAction';
+import { arrayEquals } from '../../Utilities/Internal';
+import * as VSSUI_Resources from '../../Resources/VSS.Resources.VSSUI';
+var PivotCommandBar = /** @class */ (function (_super) {
+    tslib_1.__extends(PivotCommandBar, _super);
+    function PivotCommandBar(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {
+            commands: _this._getCommands(_this.props),
+            viewActions: _this._getViewActions(_this.props)
+        };
+        return _this;
+    }
+    PivotCommandBar.prototype.componentWillReceiveProps = function (nextProps) {
+        var changed = false;
+        if (!arrayEquals(this.props.commands, nextProps.commands)) {
+            this._unsubscribeItems(this.props.commands, this._onCommandsChanged);
+            this._subscribeItems(nextProps.commands, this._onCommandsChanged);
+            changed = true;
+        }
+        if (!arrayEquals(this.props.viewActions, nextProps.viewActions)) {
+            this._unsubscribeItems(this.props.viewActions, this._onViewActionsChanged);
+            this._subscribeItems(nextProps.viewActions, this._onViewActionsChanged);
+            changed = true;
+        }
+        if (this.props.showFilterAction !== nextProps.showFilterAction ||
+            this.props.filterBar !== nextProps.filterBar) {
+            changed = true;
+        }
+        if (changed) {
+            this.setState({
+                commands: this._getCommands(nextProps),
+                viewActions: this._getViewActions(nextProps)
+            });
+        }
+    };
+    PivotCommandBar.prototype.componentDidMount = function () {
+        this._subscribeItems(this.props.commands, this._onCommandsChanged);
+        this._subscribeItems(this.props.viewActions, this._onViewActionsChanged);
+    };
+    PivotCommandBar.prototype.componentWillUnmount = function () {
+        this._unsubscribeItems(this.props.commands, this._onCommandsChanged);
+        this._unsubscribeItems(this.props.viewActions, this._onViewActionsChanged);
+    };
+    PivotCommandBar.prototype._subscribeItems = function (itemSources, observer) {
+        (itemSources || []).forEach(function (source) { return source.subscribe(observer); });
+    };
+    PivotCommandBar.prototype._unsubscribeItems = function (itemSources, observer) {
+        (itemSources || []).forEach(function (source) { return source.unsubscribe(observer); });
+    };
+    PivotCommandBar.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, className = _a.className, viewOptions = _a.viewOptions, filterBar = _a.filterBar, hasAppliedFilter = _a.hasAppliedFilter, showFilterAction = _a.showFilterAction, onShowFilterBarClicked = _a.onShowFilterBarClicked, showFilterBarViewOptionKey = _a.showFilterBarViewOptionKey, prependSeparator = _a.prependSeparator;
+        var _b = this.state, commands = _b.commands, viewActions = _b.viewActions;
+        // Set up commands first by keeping important commands visible and the rest under the overflow menu (...)
+        var commandItems = [];
+        var commandOverflowItems = [];
+        if (commands && commands.length) {
+            var importantCommands = commands.filter(function (c) { return c.important; });
+            var overflowCommands = commands.filter(function (c) { return !c.important; });
+            // Important commands are always visible
+            commandItems = mapActionsToItems(importantCommands, viewOptions, this._forceUpdate);
+            // Non-important commands go to overflow section
+            commandOverflowItems = mapActionsToItems(overflowCommands, viewOptions, this._forceUpdate);
+        }
+        // Set up view actions the same way we do for commands
+        // Instead of (...), non important view actions go under 'View Options'
+        var viewActionItems = [];
+        var farActions = [];
+        if (viewActions && viewActions.length) {
+            farActions.push.apply(farActions, viewActions.filter(function (va) { return va.important && va.viewActionRenderArea === 1 /* beforeViewOptions */; }));
+        }
+        if (viewActions && viewActions.length) {
+            // Keep non-important items under view options
+            var overflowViewActions = viewActions.filter(function (va) { return !va.important; });
+            if (overflowViewActions.length) {
+                farActions.push({
+                    key: "viewOptions",
+                    name: VSSUI_Resources.PivotBarViewOptionsText,
+                    important: true,
+                    actionType: 0 /* Command */,
+                    iconProps: { iconName: "Equalizer" },
+                    children: overflowViewActions,
+                });
+            }
+        }
+        if (viewActions && viewActions.length) {
+            farActions.push.apply(farActions, viewActions.filter(function (va) { return va.important && va.viewActionRenderArea !== 1 /* beforeViewOptions */; }));
+        }
+        // Add filter view action automatically when a filterbar exists in the childrenF
+        if (showFilterAction && !filterBar) {
+            // Filter action is added right after selected pivot view actions
+            var filterActionIndex = Math.max(farActions.length - 1, 0);
+            farActions.splice(filterActionIndex, 0, {
+                key: showFilterBarViewOptionKey,
+                important: true,
+                actionType: 1 /* OnOff */,
+                actionProps: {
+                    showText: false,
+                    onAriaLabel: VSSUI_Resources.PivotBarFilterActionTextHide,
+                    offAriaLabel: VSSUI_Resources.PivotBarFilterActionTextShow,
+                    onIconProps: { iconName: hasAppliedFilter ? "FilterSolid" : "Filter" },
+                    offIconProps: { iconName: hasAppliedFilter ? "FilterSolid" : "Filter" },
+                },
+                onClick: onShowFilterBarClicked
+            });
+        }
+        // View actions go to far right
+        viewActionItems = mapActionsToItems(farActions, viewOptions, this._forceUpdate);
+        // If available, show inline filterbar to the left of all view actions
+        if (filterBar) {
+            viewActionItems.unshift({
+                className: "vss-PivotBar--inlineFilterBar",
+                key: "filterBar",
+                onRender: function () { return filterBar; }
+            });
+        }
+        if (commandItems.length || commandOverflowItems.length || viewActionItems.length) {
+            return (React.createElement("div", { className: "vss-PivotBar--right" },
+                !!(prependSeparator && (commandItems.length || commandOverflowItems.length)) && React.createElement("div", { className: "vss-PivotBar--separator" }),
+                React.createElement(CommandBar, { componentRef: (function (commandBar) { _this._commandBar = commandBar; }), className: css(className), items: commandItems, overflowItems: commandOverflowItems, farItems: viewActionItems, elipisisAriaLabel: VSSUI_Resources.PivotBarMoreCommandsAriaLabel })));
+        }
+        return null;
+    };
+    PivotCommandBar.prototype.focus = function () {
+        if (this._commandBar) {
+            this._commandBar.focus();
+        }
+    };
+    PivotCommandBar.prototype._getCommands = function (props) {
+        var commands = [];
+        var pivotCommands = props.commands || [];
+        for (var _i = 0, pivotCommands_1 = pivotCommands; _i < pivotCommands_1.length; _i++) {
+            var pc = pivotCommands_1[_i];
+            commands.push.apply(commands, pc.items);
+        }
+        return commands;
+    };
+    PivotCommandBar.prototype._getViewActions = function (props) {
+        var viewActions = [];
+        var pivotViewActions = props.viewActions || [];
+        for (var _i = 0, pivotViewActions_1 = pivotViewActions; _i < pivotViewActions_1.length; _i++) {
+            var pv = pivotViewActions_1[_i];
+            viewActions.push.apply(viewActions, pv.items);
+        }
+        return viewActions;
+    };
+    PivotCommandBar.prototype._onCommandsChanged = function () {
+        this.setState({ commands: this._getCommands(this.props) });
+    };
+    PivotCommandBar.prototype._onViewActionsChanged = function () {
+        this.setState({ viewActions: this._getViewActions(this.props) });
+    };
+    /**
+     * Conveniently autobound forceUpdate method.
+     */
+    PivotCommandBar.prototype._forceUpdate = function () {
+        this.forceUpdate();
+    };
+    tslib_1.__decorate([
+        autobind
+    ], PivotCommandBar.prototype, "_onCommandsChanged", null);
+    tslib_1.__decorate([
+        autobind
+    ], PivotCommandBar.prototype, "_onViewActionsChanged", null);
+    tslib_1.__decorate([
+        autobind
+    ], PivotCommandBar.prototype, "_forceUpdate", null);
+    return PivotCommandBar;
+}(BaseComponent));
+export { PivotCommandBar };

Components/ResponsiveViewport/index.d.ts

 export * from './ResponsiveViewport';
-export * from './ResponsiveViewport.Props';
+

Components/ResponsiveViewport/index.js

@@ -1,1 +0,3 @@
-export*from"./ResponsiveViewport";
+export * from './ResponsiveViewport';
+// @NOTE: Explicit export list due to typescript compiler bug 18644 where a require is generated for export * when const enum's are present
+//export { IBreakPoint, IResponsiveViewportProps, IResponsiveViewport } from './ResponsiveViewport.Props'; 

Components/ResponsiveViewport/ResponsiveViewport.js

@@ -1,1 +0,67 @@
-import*as tslib_1 from"tslib";import*as React from"react";import{css,BaseComponent,getRect,autobind}from"office-ui-fabric-react/lib/Utilities";var ResizeDelayMs=100,ResponsiveViewport=function(e){function t(){var t=e.call(this)||this;return t.state={activeBreakpoints:[]},t._onAsyncResize=t._async.throttle(t._onAsyncResize,ResizeDelayMs,{leading:!1}),t}return tslib_1.__extends(t,e),t.prototype.componentDidMount=function(){this._events.on(window,"resize",this._onAsyncResize),this._resize()},t.prototype.componentWillUnmount=function(){this._events.dispose()},t.prototype.render=function(){var e=this.props,t=e.tag,i=void 0===t?"div":t,n=e.className,o=e.children,s=e.onRenderContent,r=this.state.activeBreakpoints,a=s&&s(r)||o;return React.createElement(i,{className:css.apply(void 0,[n].concat(r&&r.map(function(e){return e.className}))),ref:this._resolveElement},a)},t.prototype.measure=function(){this._resize()},t.prototype._onAsyncResize=function(){this._resize()},t.prototype._resize=function(){var e=getRect(this._element).width;this.setState({activeBreakpoints:this._getActiveBreakpoints(e)})},t.prototype._getActiveBreakpoints=function(e){return this.props.breakPoints.filter(function(t){return!(t.minWidth>=0&&e<t.minWidth)&&!(t.maxWidth>=0&&e>=t.maxWidth)})},t.prototype._resolveElement=function(e){this._element=e},tslib_1.__decorate([autobind],t.prototype,"_resolveElement",null),t}(BaseComponent);export{ResponsiveViewport};
+import * as tslib_1 from "tslib";
+import * as React from 'react';
+import { css, BaseComponent, getRect, autobind } from 'office-ui-fabric-react/lib/Utilities';
+var ResizeDelayMs = 100;
+var ResponsiveViewport = /** @class */ (function (_super) {
+    tslib_1.__extends(ResponsiveViewport, _super);
+    function ResponsiveViewport() {
+        var _this = _super.call(this) || this;
+        _this.state = {
+            activeBreakpoints: []
+        };
+        _this._onAsyncResize = _this._async.throttle(_this._onAsyncResize, ResizeDelayMs, {
+            leading: false
+        });
+        return _this;
+    }
+    ResponsiveViewport.prototype.componentDidMount = function () {
+        this._events.on(window, 'resize', this._onAsyncResize);
+        // React to initial width
+        this._resize();
+    };
+    ResponsiveViewport.prototype.componentWillUnmount = function () {
+        this._events.dispose();
+    };
+    ResponsiveViewport.prototype.render = function () {
+        var _a = this.props, _b = _a.tag, tag = _b === void 0 ? 'div' : _b, className = _a.className, children = _a.children, onRenderContent = _a.onRenderContent;
+        var activeBreakpoints = this.state.activeBreakpoints;
+        var content = onRenderContent && onRenderContent(activeBreakpoints) || children;
+        return React.createElement(tag, {
+            className: css.apply(void 0, [className].concat((activeBreakpoints && activeBreakpoints.map(function (x) { return x.className; })))),
+            ref: this._resolveElement
+        }, content);
+    };
+    ResponsiveViewport.prototype.measure = function () {
+        this._resize();
+    };
+    ResponsiveViewport.prototype._onAsyncResize = function () {
+        this._resize();
+    };
+    ResponsiveViewport.prototype._resize = function () {
+        var rect = getRect(this._element);
+        var width = rect.width;
+        this.setState({
+            activeBreakpoints: this._getActiveBreakpoints(width)
+        });
+    };
+    ResponsiveViewport.prototype._getActiveBreakpoints = function (width) {
+        var breakPoints = this.props.breakPoints;
+        return breakPoints.filter(function (bp) {
+            if (bp.minWidth >= 0 && width < bp.minWidth) {
+                return false;
+            }
+            if (bp.maxWidth >= 0 && width >= bp.maxWidth) {
+                return false;
+            }
+            return true;
+        });
+    };
+    ResponsiveViewport.prototype._resolveElement = function (element) {
+        this._element = element;
+    };
+    tslib_1.__decorate([
+        autobind
+    ], ResponsiveViewport.prototype, "_resolveElement", null);
+    return ResponsiveViewport;
+}(BaseComponent));
+export { ResponsiveViewport };

Components/VssContextualMenu/index.js

@@ -1,1 +0,3 @@
-export*from"./VssContextualMenu";
+export * from "./VssContextualMenu";
+// @NOTE: Explicit export list due to typescript compiler bug 18644 where a require is generated for export * when const enum's are present
+// export { IVssContextualMenuItemProvider, IVssContextualMenuProps, IVssContextualMenuItem, IVssContextualMenuGroup } from "./VssContextualMenu.Props"; 

Components/VssContextualMenu/VssContextualMenu.js

@@ -1,1 +0,460 @@
-import*as tslib_1 from"tslib";import*as React from"react";import*as ReactDOM from"react-dom";import{ContextualMenu,ContextualMenuItemType}from"office-ui-fabric-react/lib/ContextualMenu";import{css,autobind,BaseComponent,elementContains}from"office-ui-fabric-react/lib/Utilities";import"./VssContextualMenu.css";var VssContextualMenu=function(e){function t(){var t=e.call(this)||this;return t._invalidateItem=function(e){var i=!1;if(t.subMenuId){var n=t._findMenuItems(t.subMenuId),o=t._findItemIndex(n,e);i=t._focusItem(n,o-1)}if(!i){var n=t._findMenuItems(t.props.id),o=t._findItemIndex(n,e);(i=t._focusItem(n,o-1))||(o>0?i=t._focusItem(n,0):t._setTimeout(function(){var e=t._findMenuItems(t.props.id);t._focusItem(e,0)},0))}!i&&t._activeElement&&t.contains(document.activeElement)&&t._activeElement.focus()},t.timers=[],t._items=[],t._groups=[],t.state={displayItems:[]},t}return tslib_1.__extends(t,e),t.prototype.render=function(){if(this.state.loadingTimeout)return null;var e=this.state.displayItems,t=this.props,i=t.className,n=t.directionalHint,o=t.gapSpace,s=void 0===o?5:o,r=!(!this._items||!this._items.some(function(e){return!!e.icon||!!e.iconProps}));return this._items.forEach(function(e){e.menuHasIcons=r}),React.createElement(ContextualMenu,tslib_1.__assign({gapSpace:s,directionalHint:n},this.props,{items:e,className:css("vss-contextualMenu-list",i),onDismiss:this._onDismiss,onRenderSubMenu:this._onRenderSubMenu}))},t.prototype.componentWillMount=function(){var e=this,i=this._setTimeout(function(){e.setState({loadingTimeout:void 0})},100);this._items=this.props.items||[],this._groups=this.props.groups||[],this.setState({displayItems:this.props.items?this._arrangeItems(this.props.items):[],loadingTimeout:i}),this.props.isSubMenu||(t._activeMenu&&t._activeMenu.dismiss(null,!0),t._activeMenu=this),this._activeElement=document.activeElement},t.prototype.componentWillUnmount=function(){if(this._isMounted=!1,e.prototype.componentWillUnmount.call(this),this.state.loadingTimeout&&this._clearTimeout(this.state.loadingTimeout),this.timers){for(var i=0,n=this.timers;i<n.length;i++){var o=n[i];window.clearTimeout(o)}this.timers=[]}t._activeMenu===this&&delete t._activeMenu},t.prototype.componentDidMount=function(){var e=this;if(this._isMounted=!0,this.props.providers&&this.props.providers.length>0)for(var t=this.props.providers.map(function(e,t){return t}),i=function(i){n.props.providers[i].loadItems(function(t,i,n){e._itemsChanged(t,i,n)},function(){if(e.state.loadingTimeout){var n=t.indexOf(i);n>-1&&(t.splice(n,1),e._isMounted&&0===t.length&&e.setState({loadingTimeout:void 0}))}})},n=this,o=0;o<this.props.providers.length;o++)i(o);else this.setState({loadingTimeout:void 0});this.props.mouseLeaveDelayMs&&this._events.on(document.body,"mousemove",function(t){e.props.target.contains(t.target)||e.contains(t.target)?e.closeTimeout&&(e._clearTimeout(e.closeTimeout),delete e.closeTimeout):e.closeTimeout||(e.closeTimeout=e._setTimeout(function(){delete e.closeTimeout,e.dismiss(t,!0)},e.props.mouseLeaveDelayMs||0))}),this._events.on(document,"keydown",function(t){"`"!==t.key||t.defaultPrevented?16===t.which||17===t.which||18===t.which||e.props.isSubMenu||e.props.shouldFocusOnMount||e.contains(document.activeElement)||e.dismiss(t,!0):(e._forceGroupNames=!e._forceGroupNames,e.setState({displayItems:e._arrangeItems(e._items)}))})},t.prototype.componentWillReceiveProps=function(e){if(e.isSubMenu){var t=this.props.items.length!==e.items.length;t||(t=this.props.items.some(function(t){return!e.items.some(function(e){return e.key===t.key})})),t&&this.setState({displayItems:e.items?this._arrangeItems(e.items):[]})}},t.prototype.contains=function(e){return this._isMounted&&elementContains(ReactDOM.findDOMNode(this),e)||this._submenuComponent&&this._submenuComponent.contains(e)},t.prototype.dismiss=function(e,t){this.props.onDismiss&&this.props.onDismiss(e,!0)},t.prototype._arrangeItems=function(e,t){var i=e.some(function(e){return e.rank>=0}),n=e.some(function(e){return!!e.groupKey});return e=e.slice(),i&&this._sortItems(e),n&&(e=this._groupItems(e,t)),this._removeConsecutiveSeparators(e),e},t.prototype._clearTimeout=function(e){if(this.timers){var t=this.timers.indexOf(e);this.timers.splice(t,1)}window.clearTimeout(e)},t.prototype._findMenuItems=function(e){var t=document.querySelector("#"+e);if(t)return t.querySelectorAll("[role='menuitem']")},t.prototype._findItemIndex=function(e,t){var i=-1;if(e&&e.length>1)for(var n=0;n<e.length;n++){var o=e.item(n);if(o.parentElement&&o.parentElement.id===t){i=n;break}}return i},t.prototype._focusItem=function(e,t){var i=!1;if(e&&e.length>t&&t>-1){e.item(t).focus(),i=!0}return i},t.prototype._itemsChanged=function(e,t,i){var n=this;if(this._isMounted){var o={};this._items.forEach(function(e){t&&-1!==t.indexOf(e.key)||(o[e.key]=e)}),e.forEach(function(e){e.invalidateItem=function(){n._invalidateItem(e.key)},o[e.key]=e});var s=[];Object.keys(o).forEach(function(e){s.push(o[e])}),this._items=s,this.setState({displayItems:this._arrangeItems(s,i)})}},t.prototype._groupItems=function(e,t){var i={},n=0,o=[],s=this._forceGroupNames;if(this._groups){n=this._groups.reduce(function(e,t){return t.rank>e?t.rank:e},0);for(var r=0,u=this._groups;r<u.length;r++){v=u[r];i[v.key]={key:v.key,name:v.name,rank:void 0===v.rank?++n:v.rank,showGroupName:v.showGroupName,items:[]}}}else this._groups=[];if(t)for(var a=0,m=t;a<m.length;a++){v=m[a];i[v.key]||(i[v.key]={key:v.key,name:v.name,rank:void 0===v.rank?++n:v.rank,showGroupName:v.showGroupName,items:[]},this._groups.push(v))}for(var p=0,c=e;p<c.length;p++){var l=c[p];l.groupKey?i[l.groupKey]?i[l.groupKey].items.push(l):i[l.groupKey]={key:l.groupKey,name:l.groupKey,rank:++n,items:[l]}:o.push(l)}var h=Object.keys(i).map(function(e){return i[e]});h.sort(function(e,t){return(e.rank||Number.MAX_VALUE)-(t.rank||Number.MAX_VALUE)}),h.push({key:"ungrouped",name:"Ungrouped",rank:++n,items:o}),h.forEach(function(e){for(var t=e.items;t.length>0&&t[0].itemType===ContextualMenuItemType.Divider;)t.shift();for(;t.length>0&&t[t.length-1].itemType===ContextualMenuItemType.Divider;)t.pop()}),e=[];for(var f=!0,d=0,_=h;d<_.length;d++){var v;(0!==(v=_[d]).items.length||s)&&(v.showGroupName&&v.name||s?e.push({key:"group_"+v.name,itemType:ContextualMenuItemType.Header,name:s?v.name+" (key: "+v.key+")":v.name}):f||e.push({key:"divider_"+v.name,itemType:ContextualMenuItemType.Divider}),f&&(f=!1),e=e.concat(v.items))}return e},t.prototype._onDismiss=function(e,t){this._activeElement&&this.contains(document.activeElement)&&this._activeElement.focus(),this.props.onDismiss(e,t)},t.prototype._onRenderSubMenu=function(e){var i=this;return this.subMenuId=e.id,e.items&&e.items.forEach(function(e){e.invalidateItem=function(){i._invalidateItem(e.key)}}),React.createElement(t,tslib_1.__assign({ref:function(e){i._submenuComponent=e}},e))},t.prototype._removeConsecutiveSeparators=function(e){for(var t=!1,i=e.length-1;i>=0;i--){var n=e[i].itemType===ContextualMenuItemType.Divider;n&&t&&e.splice(i,1),t=n}},t.prototype._setTimeout=function(e,t){for(var i=[],n=2;n<arguments.length;n++)i[n-2]=arguments[n];var o=window.setTimeout.apply(window,[e,t].concat(i));return this.timers||(this.timers=[]),this.timers.push(o),o},t.prototype._sortItems=function(e){e.sort(function(e,t){return(e.rank||Number.MAX_VALUE)-(t.rank||Number.MAX_VALUE)})},tslib_1.__decorate([autobind],t.prototype,"_itemsChanged",null),tslib_1.__decorate([autobind],t.prototype,"_onDismiss",null),tslib_1.__decorate([autobind],t.prototype,"_onRenderSubMenu",null),t}(BaseComponent);export{VssContextualMenu};
+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";
+/**
+ * Creates office fabric contextual menu, also takes contribution ids to get menu contributions from extensions
+ * P.S: ContextualMenu generates some warnings look: https://github.com/OfficeDev/office-ui-fabric-react/issues/357
+ */
+var VssContextualMenu = /** @class */ (function (_super) {
+    tslib_1.__extends(VssContextualMenu, _super);
+    function VssContextualMenu() {
+        var _this = _super.call(this) || this;
+        _this._invalidateItem = function (key) {
+            var foundMatch = false;
+            // If there is a sub menu, first look for match in the sub menu
+            if (_this.subMenuId) {
+                var matches = _this._findMenuItems(_this.subMenuId);
+                var itemIndex = _this._findItemIndex(matches, key);
+                foundMatch = _this._focusItem(matches, itemIndex - 1);
+            }
+            // If we did not focus anything in sub menu, try this menu
+            if (!foundMatch) {
+                var matches = _this._findMenuItems(_this.props.id);
+                var itemIndex = _this._findItemIndex(matches, key);
+                foundMatch = _this._focusItem(matches, itemIndex - 1);
+                // check to see if the first match is not the item being removed.  If it is not then focus it.
+                if (!foundMatch) {
+                    if (itemIndex > 0) {
+                        foundMatch = _this._focusItem(matches, 0);
+                    }
+                    else {
+                        _this._setTimeout(function () {
+                            var matches = _this._findMenuItems(_this.props.id);
+                            _this._focusItem(matches, 0);
+                        }, 0);
+                    }
+                }
+            }
+            // If still no matches, then try and focus the previously active element
+            if (!foundMatch && _this._activeElement && _this.contains(document.activeElement)) {
+                _this._activeElement.focus();
+            }
+        };
+        _this.timers = [];
+        _this._items = [];
+        _this._groups = [];
+        _this.state = {
+            displayItems: [],
+        };
+        return _this;
+    }
+    VssContextualMenu.prototype.render = function () {
+        if (this.state.loadingTimeout) {
+            return null;
+        }
+        var displayItems = this.state.displayItems;
+        var _a = this.props, className = _a.className, directionalHint = _a.directionalHint, _b = _a.gapSpace, gapSpace = _b === void 0 ? 5 : _b;
+        var hasIcons = !!(this._items && this._items.some(function (item) { return !!item.icon || !!item.iconProps; }));
+        this._items.forEach(function (menuItem) {
+            menuItem.menuHasIcons = hasIcons;
+        });
+        return React.createElement(ContextualMenu, tslib_1.__assign({ gapSpace: gapSpace, directionalHint: directionalHint }, this.props, { items: displayItems, className: css("vss-contextualMenu-list", className), onDismiss: this._onDismiss, onRenderSubMenu: this._onRenderSubMenu }));
+    };
+    VssContextualMenu.prototype.componentWillMount = function () {
+        var _this = this;
+        var loadingTimeout = this._setTimeout(function () {
+            _this.setState({ loadingTimeout: undefined });
+        }, 100);
+        this._items = this.props.items || [];
+        this._groups = this.props.groups || [];
+        this.setState({
+            displayItems: this.props.items ? this._arrangeItems(this.props.items) : [],
+            loadingTimeout: loadingTimeout,
+        });
+        // Ensure we only have a single root menu open, ignore global processing for submenus.
+        if (!this.props.isSubMenu) {
+            if (VssContextualMenu._activeMenu) {
+                VssContextualMenu._activeMenu.dismiss(null, true);
+            }
+            VssContextualMenu._activeMenu = this;
+        }
+        // Save the active element as we are bringing up the menu.
+        this._activeElement = document.activeElement;
+    };
+    VssContextualMenu.prototype.componentWillUnmount = function () {
+        this._isMounted = false;
+        _super.prototype.componentWillUnmount.call(this);
+        if (this.state.loadingTimeout) {
+            this._clearTimeout(this.state.loadingTimeout);
+        }
+        if (this.timers) {
+            for (var _i = 0, _a = this.timers; _i < _a.length; _i++) {
+                var timer = _a[_i];
+                window.clearTimeout(timer);
+            }
+            this.timers = [];
+        }
+        // If we are the active root menu we can clear our state on closure.
+        if (VssContextualMenu._activeMenu === this) {
+            delete VssContextualMenu._activeMenu;
+        }
+    };
+    VssContextualMenu.prototype.componentDidMount = function () {
+        var _this = this;
+        this._isMounted = true;
+        // If the menu items are being supplied through a callback we will ensure we have
+        // start resolving them and setup the loading menu items.
+        if (this.props.providers && this.props.providers.length > 0) {
+            // create array that will track when providers have indicated they have loaded their intial items
+            var uninitializedProviders_1 = this.props.providers.map(function (x, i) { return i; });
+            var _loop_1 = function (i) {
+                var provider = this_1.props.providers[i];
+                // Load the items from the provider
+                provider.loadItems(function (items, removedItems, groupInfo) {
+                    _this._itemsChanged(items, removedItems, groupInfo);
+                }, function () {
+                    // If loading timeout is still set, see if all providers now initialized.
+                    if (_this.state.loadingTimeout) {
+                        // Look for the provider in the array of providers still loading
+                        var indexOfProvider = uninitializedProviders_1.indexOf(i);
+                        if (indexOfProvider > -1) {
+                            // If we found it, remove it from the array
+                            uninitializedProviders_1.splice(indexOfProvider, 1);
+                            // If no providers still loading, then remove the loading timeout
+                            if (_this._isMounted && uninitializedProviders_1.length === 0) {
+                                _this.setState({ loadingTimeout: undefined });
+                            }
+                        }
+                    }
+                });
+            };
+            var this_1 = this;
+            // Invoke each provider
+            for (var i = 0; i < this.props.providers.length; i++) {
+                _loop_1(i);
+            }
+        }
+        else {
+            // No providers so load immediately
+            this.setState({ loadingTimeout: undefined });
+        }
+        if (this.props.mouseLeaveDelayMs) {
+            // Track the mousemove on the document to close if the mouse is outside the menu for a period of time.
+            this._events.on(document.body, "mousemove", function (event) {
+                if (_this.props.target.contains(event.target) || _this.contains(event.target)) {
+                    if (_this.closeTimeout) {
+                        _this._clearTimeout(_this.closeTimeout);
+                        delete _this.closeTimeout;
+                    }
+                }
+                else {
+                    if (!_this.closeTimeout) {
+                        _this.closeTimeout = _this._setTimeout(function () {
+                            delete _this.closeTimeout;
+                            _this.dismiss(event, true);
+                        }, _this.props.mouseLeaveDelayMs || 0);
+                    }
+                }
+            });
+        }
+        this._events.on(document, "keydown", function (event) {
+            // Invert the display of group names for the opened menus when the ` key pressed.
+            if (event.key === "`" && !event.defaultPrevented) {
+                _this._forceGroupNames = !_this._forceGroupNames;
+                _this.setState({ displayItems: _this._arrangeItems(_this._items) });
+            }
+            else if (event.which !== 16 /* KeyCodes.Shift */
+                && event.which !== 17 /* KeyCodes.Ctrl */
+                && event.which !== 18 /* KeyCodes.Alt */
+                && !_this.props.isSubMenu
+                && !_this.props.shouldFocusOnMount
+                && !_this.contains(document.activeElement)) {
+                _this.dismiss(event, true);
+            }
+        });
+    };
+    VssContextualMenu.prototype.componentWillReceiveProps = function (nextProps) {
+        if (nextProps.isSubMenu) {
+            var itemsChanged = this.props.items.length !== nextProps.items.length;
+            if (!itemsChanged) {
+                // Check if same items exist
+                itemsChanged = this.props.items.some(function (value) {
+                    return !nextProps.items.some(function (nextItem) { return nextItem.key === value.key; });
+                });
+            }
+            if (itemsChanged) {
+                this.setState({
+                    displayItems: nextProps.items ? this._arrangeItems(nextProps.items) : []
+                });
+            }
+        }
+    };
+    VssContextualMenu.prototype.contains = function (element) {
+        return this._isMounted && elementContains(ReactDOM.findDOMNode(this), element) || (this._submenuComponent && this._submenuComponent.contains(element));
+    };
+    VssContextualMenu.prototype.dismiss = function (reason, dismissAll) {
+        if (this.props.onDismiss) {
+            this.props.onDismiss(reason, true);
+        }
+    };
+    /**
+     * Sort and group our menu items
+     * @param items
+     */
+    VssContextualMenu.prototype._arrangeItems = function (items, groupInfo) {
+        var shouldSortMenuItems = items.some(function (x) { return x.rank >= 0; });
+        var shouldGroupMenuItems = items.some(function (x) { return !!x.groupKey; });
+        items = items.slice();
+        if (shouldSortMenuItems) {
+            this._sortItems(items);
+        }
+        if (shouldGroupMenuItems) {
+            items = this._groupItems(items, groupInfo);
+        }
+        this._removeConsecutiveSeparators(items);
+        return items;
+    };
+    VssContextualMenu.prototype._clearTimeout = function (timeoutId) {
+        if (this.timers) {
+            var timerIndex = this.timers.indexOf(timeoutId);
+            this.timers.splice(timerIndex, 1);
+        }
+        window.clearTimeout(timeoutId);
+    };
+    VssContextualMenu.prototype._findMenuItems = function (menuId) {
+        var menuElement = document.querySelector("#" + menuId);
+        if (menuElement) {
+            return menuElement.querySelectorAll("[role='menuitem']");
+        }
+    };
+    VssContextualMenu.prototype._findItemIndex = function (matches, key) {
+        var matchedIndex = -1;
+        if (matches && matches.length > 1) {
+            // Loop through the tabbable items and try and find item which has same key that was just clicked
+            for (var i = 0; i < matches.length; i++) {
+                var item = matches.item(i);
+                if (item.parentElement && item.parentElement.id === key) {
+                    matchedIndex = i;
+                    break;
+                }
+            }
+        }
+        return matchedIndex;
+    };
+    VssContextualMenu.prototype._focusItem = function (matches, itemIndex) {
+        var itemFocused = false;
+        if (matches && matches.length > itemIndex && itemIndex > -1) {
+            var item = matches.item(itemIndex);
+            item.focus();
+            itemFocused = true;
+        }
+        return itemFocused;
+    };
+    VssContextualMenu.prototype._itemsChanged = function (items, removedItems, groupInfo) {
+        var _this = this;
+        if (this._isMounted) {
+            // Build map of what is currently in the list of menu items
+            var existingItemsMap_1 = {};
+            this._items.forEach(function (item) {
+                // if an item ie being removed, then do not add to the existing map.
+                if (!removedItems || removedItems.indexOf(item.key) === -1) {
+                    existingItemsMap_1[item.key] = item;
+                }
+            });
+            // Merge in updated items.  This may include updates to existing items or new items
+            items.forEach(function (item) {
+                item.invalidateItem = function () {
+                    _this._invalidateItem(item.key);
+                };
+                existingItemsMap_1[item.key] = item;
+            });
+            var newItems_1 = [];
+            Object.keys(existingItemsMap_1).forEach(function (key) {
+                newItems_1.push(existingItemsMap_1[key]);
+            });
+            this._items = newItems_1;
+            this.setState({ displayItems: this._arrangeItems(newItems_1, groupInfo) });
+        }
+    };
+    /**
+     * Arrange the items into groups and put separators between them and headings above them as needed.
+     * @param items
+     */
+    VssContextualMenu.prototype._groupItems = function (items, groupInfo) {
+        var groupMap = {};
+        var maxGroupRank = 0;
+        var ungroupedItems = [];
+        var forceGroupNames = this._forceGroupNames;
+        // gather known groups
+        if (this._groups) {
+            maxGroupRank = this._groups.reduce(function (max, g) { return g.rank > max ? g.rank : max; }, 0);
+            for (var _i = 0, _a = this._groups; _i < _a.length; _i++) {
+                var g = _a[_i];
+                groupMap[g.key] = {
+                    key: g.key,
+                    name: g.name,
+                    rank: g.rank === undefined ? ++maxGroupRank : g.rank,
+                    showGroupName: g.showGroupName,
+                    items: [],
+                };
+            }
+        }
+        else {
+            this._groups = [];
+        }
+        if (groupInfo) {
+            for (var _b = 0, groupInfo_1 = groupInfo; _b < groupInfo_1.length; _b++) {
+                var g = groupInfo_1[_b];
+                var existingGroup = groupMap[g.key];
+                if (!existingGroup) {
+                    groupMap[g.key] = {
+                        key: g.key,
+                        name: g.name,
+                        rank: g.rank === undefined ? ++maxGroupRank : g.rank,
+                        showGroupName: g.showGroupName,
+                        items: [],
+                    };
+                    this._groups.push(g);
+                }
+            }
+        }
+        // put all the items in groups
+        for (var _c = 0, items_1 = items; _c < items_1.length; _c++) {
+            var i = items_1[_c];
+            if (i.groupKey) {
+                if (groupMap[i.groupKey]) {
+                    groupMap[i.groupKey].items.push(i);
+                }
+                else {
+                    groupMap[i.groupKey] = {
+                        key: i.groupKey,
+                        name: i.groupKey,
+                        rank: ++maxGroupRank,
+                        items: [i],
+                    };
+                }
+            }
+            else {
+                ungroupedItems.push(i);
+            }
+        }
+        // sort the groups
+        var groupList = Object.keys(groupMap).map(function (n) { return groupMap[n]; });
+        groupList.sort(function (a, b) { return (a.rank || Number.MAX_VALUE) - (b.rank || Number.MAX_VALUE); });
+        groupList.push({
+            key: "ungrouped",
+            name: "Ungrouped",
+            rank: ++maxGroupRank,
+            items: ungroupedItems,
+        });
+        // remove dividers from the beginning and end of each group
+        groupList.forEach(function (g) {
+            var array = g.items;
+            while (array.length > 0 && array[0].itemType === ContextualMenuItemType.Divider) {
+                array.shift();
+            }
+            while (array.length > 0 && array[array.length - 1].itemType === ContextualMenuItemType.Divider) {
+                array.pop();
+            }
+        });
+        // merge the groups into the final array
+        items = [];
+        var first = true;
+        for (var _d = 0, groupList_1 = groupList; _d < groupList_1.length; _d++) {
+            var g = groupList_1[_d];
+            if (g.items.length === 0 && !forceGroupNames) {
+                continue;
+            }
+            // add the separator or header for the top of the group
+            if ((g.showGroupName && g.name) || forceGroupNames) {
+                items.push({
+                    key: "group_" + g.name,
+                    itemType: ContextualMenuItemType.Header,
+                    name: forceGroupNames ? g.name + " (key: " + g.key + ")" : g.name,
+                });
+            }
+            else if (!first) {
+                // don't add a separator when there's a header, because header menu items take care
+                // of the separator for us
+                items.push({
+                    key: "divider_" + g.name,
+                    itemType: ContextualMenuItemType.Divider,
+                });
+            }
+            if (first) {
+                first = false;
+            }
+            items = items.concat(g.items);
+        }
+        return items;
+    };
+    VssContextualMenu.prototype._onDismiss = function (ev, dismissAll) {
+        // If focus remains in the menu when it is dismissed we will set focus back to the
+        // previously focused element.
+        if (this._activeElement && this.contains(document.activeElement)) {
+            this._activeElement.focus();
+        }
+        this.props.onDismiss(ev, dismissAll);
+    };
+    VssContextualMenu.prototype._onRenderSubMenu = function (props) {
+        var _this = this;
+        this.subMenuId = props.id;
+        if (props.items) {
+            props.items.forEach(function (item) {
+                item.invalidateItem = function () {
+                    _this._invalidateItem(item.key);
+                };
+            });
+        }
+        return React.createElement(VssContextualMenu, tslib_1.__assign({ ref: function (submenuComponent) { _this._submenuComponent = submenuComponent; } }, props));
+    };
+    VssContextualMenu.prototype._removeConsecutiveSeparators = function (items) {
+        var lastWasSeparator = false;
+        for (var i = items.length - 1; i >= 0; i--) {
+            var currentIsSeparator = items[i].itemType === ContextualMenuItemType.Divider;
+            if (currentIsSeparator && lastWasSeparator) {
+                items.splice(i, 1);
+            }
+            lastWasSeparator = currentIsSeparator;
+        }
+    };
+    VssContextualMenu.prototype._setTimeout = function (callback, milliseconds) {
+        var args = [];
+        for (var _i = 2; _i < arguments.length; _i++) {
+            args[_i - 2] = arguments[_i];
+        }
+        var timerId = window.setTimeout.apply(window, [callback, milliseconds].concat(args));
+        if (!this.timers) {
+            this.timers = [];
+        }
+        this.timers.push(timerId);
+        return timerId;
+    };
+    /**
+     * Sort the items according to their rank property.
+     * @param items
+     */
+    VssContextualMenu.prototype._sortItems = function (items) {
+        // This is not a stable sort. If we pass items with the same rank, we may not always get them back in the
+        // same order. We have a stable sort in vssf webplatform, but we're not taking a dependency there.
+        items.sort(function (a, b) {
+            var aRank = a.rank || Number.MAX_VALUE;
+            var bRank = b.rank || Number.MAX_VALUE;
+            return aRank - bRank;
+        });
+    };
+    tslib_1.__decorate([
+        autobind
+    ], VssContextualMenu.prototype, "_itemsChanged", null);
+    tslib_1.__decorate([
+        autobind
+    ], VssContextualMenu.prototype, "_onDismiss", null);
+    tslib_1.__decorate([
+        autobind
+    ], VssContextualMenu.prototype, "_onRenderSubMenu", null);
+    return VssContextualMenu;
+}(BaseComponent));
+export { VssContextualMenu };

Components/VssDetailsList/index.d.ts

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

Components/VssDetailsList/index.js

@@ -1,1 +0,6 @@
-export*from"./VssDetailsList";export*from"./VssDetailsList.Props";export*from"./VssDetailsListGroupHeader";export*from"./VssDetailsListTitleCell";
+export * from './VssDetailsList';
+
+export * from './VssDetailsListGroupHeader';
+export * from './VssDetailsListTitleCell';
+// @NOTE: Explicit export list due to typescript compiler bug 18644 where a require is generated for export * when const enum's are present
+//export { VssDetailsListRowStyle, VssDetailsListPresentationStyles, IVssDetailsListProps, IVssDetailsListIndicator, IVssDetailsListTitleCellProps, IVssDetailsListGroupHeaderProps } from './VssDetailsList.Props'; 

Components/VssDetailsList/VssDetailsList.js

@@ -1,1 +0,241 @@
-import*as tslib_1 from"tslib";import*as React from"react";import{CheckboxVisibility,DetailsList,Selection,SelectionMode}from"office-ui-fabric-react/lib/DetailsList";import{autobind,BaseComponent,css}from"office-ui-fabric-react/lib/Utilities";import{MoreActionsButton}from"../../ContextualMenuButton";import{ContextualMenuButton}from"../../Components/ContextualMenuButton/ContextualMenuButton";import{VssContextualMenu}from"../../VssContextualMenu";import{closest}from"../../Utilities/Internal";import"./VssDetailsList.css";var VssDetailsList=function(t){function e(e){var s=t.call(this,e)||this;return s.standardPresentationStyle=127,s.state={},s}return tslib_1.__extends(e,t),e.prototype.componentWillMount=function(){var t=this._buildClassNames(this.props),e=this._buildColumns(this.props),s=this._buildSelection(this.props);this.setState({classNames:t,columns:e,selection:s})},e.prototype.componentWillReceiveProps=function(t){var e={};this.props.className===t.className&&this.props.presentationStyles===t.presentationStyles&&this.props.usePresentationStyles===t.usePresentationStyles&&this.props.rowStyle===t.rowStyle||(e.classNames=this._buildClassNames(t)),this.props.columns===t.columns&&this.props.actionsColumnKey===t.actionsColumnKey||(e.columns=this._buildColumns(t)),this.props.selection!==t.selection&&(e.selection=this._buildSelection(t)),this.setState(e)},e.prototype.render=function(){var t=this.props,e=(t.getMenuItems,t.getMenuItemProviders,t.checkboxVisibility),s=void 0===e?CheckboxVisibility.hidden:e,o=this.state,i=o.classNames,n=o.columns,l=tslib_1.__assign({},this.props),r=this._hasActions(this.props);l.className=i,l.checkboxVisibility=s,l.checkboxCellClassName="vss-DetailsList--cellCheck",l.columns=n,r&&(l.onItemContextMenu=this._onItemContextMenu);var a=React.createElement(DetailsList,tslib_1.__assign({},l,{selection:this.state.selection}));return r?React.createElement("div",{className:"vss-DetailsList--contextmenu-wrapper"},a,this._getContextMenu()):a},e.prototype._onItemContextMenu=function(t,e,s){var o=s;if(o){var i=o.target;if(i&&"A"===i.nodeName)return!0}if(!o)return this.setState({activatedItem:t,target:void 0});var n=null;if(0===o.button||!(o.clientX>0&&o.clientY>0)){var l=o.target,r=closest(l,'[role="row"]');n=r?r.querySelector("."+ContextualMenuButton.ButtonContainerClassName):null}this.setState({activatedItem:t,target:n||o})},e.prototype._onDismiss=function(){this.setState({activatedItem:void 0,target:void 0})},e.prototype._onEllipsisClick=function(t){var e=Number(t.currentTarget.dataset.index),s=this.props.selectionMode===SelectionMode.multiple,o=this.state.selection;o.setChangeEvents(!1);var i=t.ctrlKey||t.metaKey;if(s&&t.shiftKey){var n=!i;o.selectToIndex(e,n)}else if(s){!o.isIndexSelected(e)&&!i&&o.setAllSelected(!1),o.setIndexSelected(e,!0,!0)}else o.setAllSelected(!1),o.setIndexSelected(e,!0,!0);o.setChangeEvents(!0)},e.prototype._createActionsColumn=function(t){var e=this,s=tslib_1.__assign({},t);return s.onRender=function(s,o,i){var n=null;t.onRender?n=t.onRender(s,o,i):e.props.onRenderItemColumn&&(n=e.props.onRenderItemColumn(s,o,i));var l=!0;return e.props.shouldDisplayActions&&(l=e.props.shouldDisplayActions(s)),l?React.createElement("div",{className:"actions-column-wrapper"},React.createElement("div",{className:"original-content"},n),React.createElement(MoreActionsButton,{allocateSpaceWhileHidden:e.props.allocateSpaceForActionsButtonWhileHidden,className:"vss-DetailsList--contextual-menu-button",getItems:function(){return e.props.getMenuItems(s)},getItemProviders:e.props.getMenuItemProviders&&function(){return e.props.getMenuItemProviders(s)},onDismiss:e._onDismiss,"data-index":o,onClick:e._onEllipsisClick})):n},s},e.prototype._hasActions=function(t){return!(!t.actionsColumnKey||!t.getMenuItems)},e.prototype._buildSelection=function(t){return t.selection||new Selection({getKey:t.getKey})},e.prototype._buildColumns=function(t){var e=t.actionsColumnKey,s=t.columns;if(this._hasActions(t)&&s){for(var o=[],i=0,n=s;i<n.length;i++){var l=n[i];l.key===e&&(l=this._createActionsColumn(l)),o.push(l)}return o}return s},e.prototype._buildClassNames=function(t){var e=t.usePresentationStyles,s=t.className,o=t.rowStyle,i=t.hideGroupExpansion,n=t.presentationStyles,l="";if(e||n){void 0===n&&(n=this.standardPresentationStyle);var r=["vss-DetailsList--layout"];s&&r.push(s),1&n&&r.push("hideActionsButton"),2&n&&r.push("singleLine"),4&n&&r.push("flexCellLayout"),8&n&&r.push("paddingInCells"),16&n&&r.push("colors"),32&n&&r.push("linkStyles"),64&n&&r.push("headerRowStyles"),l=r.join(" ")}else l=css("vss-DetailsList",s,{"vss-DetailsList--twoLine":1===o});return l=css(l,{noGroupExpand:i})},e.prototype._getContextMenu=function(){var t=this.state,e=t.activatedItem,s=t.target;if(e){var o=this.props,i=o.getMenuItems,n=o.getMenuItemProviders,l=i(e),r=n?n(e):void 0;if(l||r)return React.createElement(VssContextualMenu,{items:l,providers:r,onDismiss:this._onDismiss,shouldFocusOnMount:!0,target:s,gapSpace:0})}},tslib_1.__decorate([autobind],e.prototype,"_onItemContextMenu",null),tslib_1.__decorate([autobind],e.prototype,"_onDismiss",null),tslib_1.__decorate([autobind],e.prototype,"_onEllipsisClick",null),e}(BaseComponent);export{VssDetailsList};
+import * as tslib_1 from "tslib";
+import * as React from 'react';
+import { CheckboxVisibility, DetailsList, Selection, SelectionMode } from 'office-ui-fabric-react/lib/DetailsList';
+import { autobind, BaseComponent, css } from 'office-ui-fabric-react/lib/Utilities';
+import { MoreActionsButton } from '../../ContextualMenuButton';
+import { ContextualMenuButton } from '../../Components/ContextualMenuButton/ContextualMenuButton';
+import { VssContextualMenu } from '../../VssContextualMenu';
+import { closest } from '../../Utilities/Internal';
+import "./VssDetailsList.css";
+/**
+ * Wraps Office Fabric Details list with state management specific to Vss Components
+ */
+var VssDetailsList = /** @class */ (function (_super) {
+    tslib_1.__extends(VssDetailsList, _super);
+    function VssDetailsList(props) {
+        var _this = _super.call(this, props) || this;
+        _this.standardPresentationStyle = 16 /* colors */ |
+            4 /* flexCellLayout */ |
+            64 /* headerRowStyles */ |
+            1 /* hideActionsButton */ |
+            32 /* linkStyles */ |
+            8 /* paddingInCells */ |
+            2 /* singleLine */;
+        _this.state = {};
+        return _this;
+    }
+    VssDetailsList.prototype.componentWillMount = function () {
+        var classNames = this._buildClassNames(this.props);
+        var columns = this._buildColumns(this.props);
+        var selection = this._buildSelection(this.props);
+        this.setState({ classNames: classNames, columns: columns, selection: selection });
+    };
+    VssDetailsList.prototype.componentWillReceiveProps = function (nextProps) {
+        var newState = {};
+        if (this.props.className !== nextProps.className ||
+            this.props.presentationStyles !== nextProps.presentationStyles ||
+            this.props.usePresentationStyles !== nextProps.usePresentationStyles ||
+            this.props.rowStyle !== nextProps.rowStyle) {
+            newState.classNames = this._buildClassNames(nextProps);
+        }
+        if (this.props.columns !== nextProps.columns || this.props.actionsColumnKey !== nextProps.actionsColumnKey) {
+            newState.columns = this._buildColumns(nextProps);
+        }
+        if (this.props.selection !== nextProps.selection) {
+            newState.selection = this._buildSelection(nextProps);
+        }
+        this.setState(newState);
+    };
+    VssDetailsList.prototype.render = function () {
+        var _a = this.props, getMenuItems = _a.getMenuItems, getMenuItemProviders = _a.getMenuItemProviders, _b = _a.checkboxVisibility, checkboxVisibility = _b === void 0 ? CheckboxVisibility.hidden : _b;
+        var _c = this.state, classNames = _c.classNames, columns = _c.columns;
+        var props = tslib_1.__assign({}, this.props);
+        var hasActions = this._hasActions(this.props);
+        props.className = classNames;
+        props.checkboxVisibility = checkboxVisibility;
+        props.checkboxCellClassName = 'vss-DetailsList--cellCheck';
+        props.columns = columns;
+        if (hasActions) {
+            props.onItemContextMenu = this._onItemContextMenu;
+        }
+        var detailsList = React.createElement(DetailsList, tslib_1.__assign({}, props, { selection: this.state.selection }));
+        if (hasActions) {
+            return React.createElement("div", { className: 'vss-DetailsList--contextmenu-wrapper' },
+                detailsList,
+                this._getContextMenu());
+        }
+        return detailsList;
+    };
+    VssDetailsList.prototype._onItemContextMenu = function (item, index, ev) {
+        var mouseEvent = ev;
+        if (mouseEvent) {
+            // We don't want to show the custom contextual menu or prevent default
+            // if the target element is an anchor tag.
+            var target_1 = mouseEvent.target;
+            if (target_1 && target_1.nodeName === 'A') {
+                return true;
+            }
+        }
+        if (!mouseEvent) {
+            return this.setState({ activatedItem: item, target: undefined });
+        }
+        var target = null;
+        // For chrome/firefox mouseEvent.button === 0 can be used to assume keyboard interaction here, whereas 
+        // in IE the mouseEvent.button will be 2, but the clientX or clientY has a negative value.
+        // So for IE and Edge, an HTMLElement needs to be passed in for anchoring otherwise the menu will be at (0, 0).
+        if (mouseEvent.button === 0 || !(mouseEvent.clientX > 0 && mouseEvent.clientY > 0)) {
+            var targetFromEvent = mouseEvent.target;
+            var row = closest(targetFromEvent, '[role="row"]');
+            target = row ? row.querySelector("." + ContextualMenuButton.ButtonContainerClassName) : null;
+        }
+        this.setState({ activatedItem: item, target: target || mouseEvent });
+    };
+    VssDetailsList.prototype._onDismiss = function () {
+        this.setState({ activatedItem: undefined, target: undefined });
+    };
+    VssDetailsList.prototype._onEllipsisClick = function (e) {
+        // Important: to handle the toggle modifiers for multi-select scenario, we must update the selection here prior to calling getMenuItems, otherwise
+        // getMenuItems may be looking an outdated selection object and returning items not in context of the updated selections. Unfortunately, even if the click
+        // event is allowed to propagate down to DetailsList for automatic selection handling, getMenuItems for the ActionsButton would have been called already
+        // (that's why selection needs to be updated here and also by design the ActionsButton should ignore toggle modifier if row is already selected).
+        var index = Number(e.currentTarget.dataset.index);
+        var isMultipleSelect = this.props.selectionMode === SelectionMode.multiple;
+        var selection = this.state.selection;
+        selection.setChangeEvents(false);
+        var isToggleModifierPressed = e.ctrlKey || e.metaKey;
+        if (isMultipleSelect && e.shiftKey) {
+            var clearExistingSelection = !isToggleModifierPressed;
+            selection.selectToIndex(index, clearExistingSelection);
+        }
+        else if (isMultipleSelect) {
+            var isNewSelection = !selection.isIndexSelected(index);
+            if (isNewSelection && !isToggleModifierPressed) {
+                selection.setAllSelected(false);
+            }
+            selection.setIndexSelected(index, true, true);
+        }
+        else {
+            selection.setAllSelected(false);
+            selection.setIndexSelected(index, true, true);
+        }
+        selection.setChangeEvents(true);
+    };
+    VssDetailsList.prototype._createActionsColumn = function (column) {
+        var _this = this;
+        var wrappedColumn = tslib_1.__assign({}, column);
+        wrappedColumn.onRender = function (item, index, c) {
+            var originalContent = null;
+            if (column.onRender) {
+                originalContent = column.onRender(item, index, c);
+            }
+            else if (_this.props.onRenderItemColumn) {
+                originalContent = _this.props.onRenderItemColumn(item, index, c);
+            }
+            else {
+                // What should we do if they provided a column that doesn't have a
+                // custom onRender method? The same thing as the base row will do?
+            }
+            var shouldDisplayActions = true;
+            if (_this.props.shouldDisplayActions) {
+                shouldDisplayActions = _this.props.shouldDisplayActions(item);
+            }
+            if (shouldDisplayActions) {
+                return React.createElement("div", { className: 'actions-column-wrapper' },
+                    React.createElement("div", { className: 'original-content' }, originalContent),
+                    React.createElement(MoreActionsButton, { allocateSpaceWhileHidden: _this.props.allocateSpaceForActionsButtonWhileHidden, className: 'vss-DetailsList--contextual-menu-button', getItems: function () { return _this.props.getMenuItems(item); }, getItemProviders: _this.props.getMenuItemProviders && (function () { return _this.props.getMenuItemProviders(item); }), onDismiss: _this._onDismiss, "data-index": index, onClick: _this._onEllipsisClick }));
+            }
+            else {
+                return originalContent;
+            }
+        };
+        return wrappedColumn;
+    };
+    VssDetailsList.prototype._hasActions = function (props) {
+        return !!(props.actionsColumnKey && props.getMenuItems);
+    };
+    VssDetailsList.prototype._buildSelection = function (props) {
+        return props.selection || new Selection({ getKey: props.getKey });
+    };
+    VssDetailsList.prototype._buildColumns = function (props) {
+        var actionsColumnKey = props.actionsColumnKey, columns = props.columns;
+        if (this._hasActions(props) && columns) {
+            var modifiedColumns = [];
+            for (var _i = 0, columns_1 = columns; _i < columns_1.length; _i++) {
+                var column = columns_1[_i];
+                if (column.key === actionsColumnKey) {
+                    column = this._createActionsColumn(column);
+                }
+                modifiedColumns.push(column);
+            }
+            return modifiedColumns;
+        }
+        return columns;
+    };
+    VssDetailsList.prototype._buildClassNames = function (props) {
+        var usePresentationStyles = props.usePresentationStyles, className = props.className, rowStyle = props.rowStyle, hideGroupExpansion = props.hideGroupExpansion;
+        var presentationStyles = props.presentationStyles;
+        var classNames = "";
+        if (usePresentationStyles || presentationStyles) {
+            if (presentationStyles === undefined) {
+                presentationStyles = this.standardPresentationStyle;
+            }
+            var classNamesList = ['vss-DetailsList--layout'];
+            if (className) {
+                classNamesList.push(className);
+            }
+            if (presentationStyles & 1 /* hideActionsButton */) {
+                classNamesList.push('hideActionsButton');
+            }
+            if (presentationStyles & 2 /* singleLine */) {
+                classNamesList.push('singleLine');
+            }
+            if (presentationStyles & 4 /* flexCellLayout */) {
+                classNamesList.push('flexCellLayout');
+            }
+            if (presentationStyles & 8 /* paddingInCells */) {
+                classNamesList.push('paddingInCells');
+            }
+            if (presentationStyles & 16 /* colors */) {
+                classNamesList.push('colors');
+            }
+            if (presentationStyles & 32 /* linkStyles */) {
+                classNamesList.push('linkStyles');
+            }
+            if (presentationStyles & 64 /* headerRowStyles */) {
+                classNamesList.push('headerRowStyles');
+            }
+            classNames = classNamesList.join(" ");
+        }
+        else {
+            classNames = css('vss-DetailsList', className, { 'vss-DetailsList--twoLine': rowStyle === 1 /* twoLine */ });
+        }
+        classNames = css(classNames, {
+            'noGroupExpand': hideGroupExpansion
+        });
+        return classNames;
+    };
+    VssDetailsList.prototype._getContextMenu = function () {
+        var _a = this.state, activatedItem = _a.activatedItem, target = _a.target;
+        if (!activatedItem) {
+            return undefined;
+        }
+        var _b = this.props, getMenuItems = _b.getMenuItems, getMenuItemProviders = _b.getMenuItemProviders;
+        var items = getMenuItems(activatedItem);
+        var itemProviders = getMenuItemProviders ? getMenuItemProviders(activatedItem) : undefined;
+        if (!items && !itemProviders) {
+            return undefined;
+        }
+        return React.createElement(VssContextualMenu, { items: items, providers: itemProviders, onDismiss: this._onDismiss, shouldFocusOnMount: true, target: target, gapSpace: 0 });
+    };
+    tslib_1.__decorate([
+        autobind
+    ], VssDetailsList.prototype, "_onItemContextMenu", null);
+    tslib_1.__decorate([
+        autobind
+    ], VssDetailsList.prototype, "_onDismiss", null);
+    tslib_1.__decorate([
+        autobind
+    ], VssDetailsList.prototype, "_onEllipsisClick", null);
+    return VssDetailsList;
+}(BaseComponent));
+export { VssDetailsList };

Components/VssDetailsList/VssDetailsListGroupHeader.js

@@ -1,1 +0,22 @@
-import*as tslib_1 from"tslib";import*as React from"react";import{FocusZone,FocusZoneDirection}from"office-ui-fabric-react/lib/FocusZone";import{BaseComponent,css}from"office-ui-fabric-react/lib/Utilities";var VssDetailsListGroupHeader=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.text,s=e.textCssClassName,o=e.onRenderContent;return React.createElement("div",{className:"vss-DetailsList--groupHeader","data-is-focusable":"true"},React.createElement(FocusZone,{direction:FocusZoneDirection.horizontal},o?o():React.createElement("div",{className:css("vss-DetailsList--groupHeaderText",s)},t)))},t}(BaseComponent);export{VssDetailsListGroupHeader};
+import * as tslib_1 from "tslib";
+import * as React from 'react';
+import { FocusZone, FocusZoneDirection } from "office-ui-fabric-react/lib/FocusZone";
+import { BaseComponent, css } from 'office-ui-fabric-react/lib/Utilities';
+/**
+ * Helper for the styling of group headers in VssDetailsList
+ */
+var VssDetailsListGroupHeader = /** @class */ (function (_super) {
+    tslib_1.__extends(VssDetailsListGroupHeader, _super);
+    function VssDetailsListGroupHeader() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    VssDetailsListGroupHeader.prototype.render = function () {
+        var _a = this.props, text = _a.text, textCssClassName = _a.textCssClassName, onRenderContent = _a.onRenderContent;
+        return React.createElement("div", { className: 'vss-DetailsList--groupHeader', "data-is-focusable": 'true' },
+            React.createElement(FocusZone, { direction: FocusZoneDirection.horizontal }, onRenderContent ?
+                onRenderContent() :
+                React.createElement("div", { className: css('vss-DetailsList--groupHeaderText', textCssClassName) }, text)));
+    };
+    return VssDetailsListGroupHeader;
+}(BaseComponent));
+export { VssDetailsListGroupHeader };

Components/VssDetailsList/VssDetailsListTitleCell.js

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

Components/VssIcon/index.d.ts

 export * from './VssIcon';
-export * from './VssIcon.Props';
+

Components/VssIcon/index.js

@@ -1,1 +0,4 @@
-export*from"./VssIcon";export*from"./VssIcon.Props";
+export * from './VssIcon';
+
+// @NOTE: Explicit export list due to typescript compiler bug 18644 where a require is generated for export * when const enum's are present
+//export { VssIconType, IVssIconProps } from './VssIcon.Props'; 

Components/VssIcon/VssIcon.js

@@ -1,1 +0,56 @@
-import*as tslib_1 from"tslib";import*as React from"react";import{Icon,IconType}from"office-ui-fabric-react/lib/Icon";import{BaseComponent,css}from"office-ui-fabric-react/lib/Utilities";import"./VssIcon.css";var VssIcon=function(e){function o(o){var s=e.call(this,o)||this;return s.state={},s}return tslib_1.__extends(o,e),o.prototype.render=function(){return React.createElement(Icon,tslib_1.__assign({},o.getIconProps(this.props)),this.props.children)},o.getIconProps=function(e){var s=tslib_1.__assign({},e);delete s.iconType,delete s.iconName;var i=e.iconType;!i&&e.iconName&&e.iconName.substr(0,o.bowtieIconPrefix.length)===o.bowtieIconPrefix&&(i=1),s.iconType=3===e.iconType?IconType.image:IconType.default;var t=css("vss-Icon");if(s.className?s.className=s.className+" "+t:s.className=t,1===i){var c=e.iconName;"string"==typeof c&&c.substr(0,o.bowtieIconPrefix.length)!==o.bowtieIconPrefix&&(c=o.bowtieIconPrefix+c);var n=css("vss-Icon--bowtie",c);s.className=s.className+" "+n}else s.iconName=e.iconName;return s},o.bowtieIconPrefix="bowtie-",o}(BaseComponent);export{VssIcon};
+import * as tslib_1 from "tslib";
+import * as React from 'react';
+import { Icon, IconType } from 'office-ui-fabric-react/lib/Icon';
+import { BaseComponent, css } from 'office-ui-fabric-react/lib/Utilities';
+import "./VssIcon.css";
+var VssIcon = /** @class */ (function (_super) {
+    tslib_1.__extends(VssIcon, _super);
+    function VssIcon(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {};
+        return _this;
+    }
+    VssIcon.prototype.render = function () {
+        return (React.createElement(Icon, tslib_1.__assign({}, VssIcon.getIconProps(this.props)), this.props.children));
+    };
+    /**
+     * Convert IVssIconProps to Fabric's IIconProps. To use with components such as IconButton
+     * that take IIconProps. This is a pure function.
+     * @param props
+     * @return
+     */
+    VssIcon.getIconProps = function (props) {
+        var fabricIconProps = tslib_1.__assign({}, props);
+        delete fabricIconProps.iconType;
+        delete fabricIconProps.iconName;
+        // If IconType is not specified, but the iconName includes the "bowtie-", then set icon type to bowtie.
+        var passedIconType = props.iconType;
+        if (!passedIconType && props.iconName && props.iconName.substr(0, VssIcon.bowtieIconPrefix.length) === VssIcon.bowtieIconPrefix) {
+            passedIconType = 1 /* bowtie */;
+        }
+        // IconType is either image or default.
+        fabricIconProps.iconType = props.iconType === 3 /* image */ ? IconType.image : IconType.default;
+        var vssIconClass = css("vss-Icon");
+        if (fabricIconProps.className) {
+            fabricIconProps.className = fabricIconProps.className + " " + vssIconClass;
+        }
+        else {
+            fabricIconProps.className = vssIconClass;
+        }
+        if (passedIconType === 1 /* bowtie */) {
+            var iconName = props.iconName;
+            if (typeof iconName === "string" && iconName.substr(0, VssIcon.bowtieIconPrefix.length) !== VssIcon.bowtieIconPrefix) {
+                iconName = VssIcon.bowtieIconPrefix + iconName;
+            }
+            var newClasses = css("vss-Icon--bowtie", iconName);
+            fabricIconProps.className = fabricIconProps.className + " " + newClasses;
+        }
+        else {
+            fabricIconProps.iconName = props.iconName;
+        }
+        return fabricIconProps;
+    };
+    VssIcon.bowtieIconPrefix = "bowtie-";
+    return VssIcon;
+}(BaseComponent));
+export { VssIcon };

Components/VssPersona/index.js

@@ -1,1 +0,1 @@
-export*from"./VssPersona";
+export * from "./VssPersona";

Components/VssPersona/VssPersona.js

@@ -1,1 +0,91 @@
-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};
+import * as tslib_1 from "tslib";
+import * as React from "react";
+import { BaseComponent, css } from "office-ui-fabric-react/lib/Utilities";
+import "./VssPersona.css";
+/**
+ * Renders a user's profile/identity/avatar image.
+ */
+var VssPersona = /** @class */ (function (_super) {
+    tslib_1.__extends(VssPersona, _super);
+    function VssPersona(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {
+            showPersonaCard: false,
+            imageUrl: _this._getImageUrl(props),
+        };
+        return _this;
+    }
+    VssPersona.prototype.componentWillReceiveProps = function (nextProps) {
+        this.state = {
+            showPersonaCard: false,
+            imageUrl: this._getImageUrl(nextProps),
+        };
+    };
+    VssPersona.prototype.shouldComponentUpdate = function (nextProps, nextState) {
+        if (!this.props.identityDetailsProvider && !nextProps.identityDetailsProvider) {
+            return false;
+        }
+        else if (!this.props.identityDetailsProvider || !nextProps.identityDetailsProvider) {
+            return true;
+        }
+        return (this.props.size !== nextProps.size)
+            || (this.props.cssClass !== nextProps.cssClass)
+            || (this.props.identityDetailsProvider !== nextProps.identityDetailsProvider)
+            || (this.state.showPersonaCard !== nextState.showPersonaCard);
+    };
+    VssPersona.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, identityDetailsProvider = _a.identityDetailsProvider, _b = _a.size, size = _b === void 0 ? "medium" : _b;
+        var className = css("vss-Persona", this.props.cssClass);
+        var imgStyle;
+        var sizePx;
+        if (typeof size === "number") {
+            imgStyle = {
+                width: size,
+                height: size,
+            };
+            sizePx = size;
+        }
+        else {
+            className = css(className, size);
+            sizePx = this._getSize(size);
+        }
+        return React.createElement("div", { className: className },
+            React.createElement("img", { ref: function (element) { _this.imageElement = element; }, style: imgStyle, src: this.state.imageUrl, "aria-label": identityDetailsProvider.getDisplayName(), onClick: !this.props.suppressPersonaCard && (function () { return _this._setPersonaCardVisible(true); }) }),
+            this.state.showPersonaCard
+                && !this.props.suppressPersonaCard
+                && identityDetailsProvider.onRenderPersonaCard
+                && identityDetailsProvider.onRenderPersonaCard(this.imageElement, function () { _this._setPersonaCardVisible(false); }));
+    };
+    VssPersona.prototype._setPersonaCardVisible = function (isVisible) {
+        this.setState({ showPersonaCard: isVisible });
+    };
+    /**
+     * Resolve the URL for the profile image.
+     * @param props
+     */
+    VssPersona.prototype._getImageUrl = function (props) {
+        var _a = this.props, identityDetailsProvider = _a.identityDetailsProvider, _b = _a.size, size = _b === void 0 ? "medium" : _b;
+        var sizePx = typeof size === "number" ? size : this._getSize(size);
+        return identityDetailsProvider.getIdentityImageUrl(sizePx);
+    };
+    /**
+     * Get the size in pixels for the given css class.
+     * @param size
+     */
+    VssPersona.prototype._getSize = function (size) {
+        switch (size) {
+            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;
+        }
+    };
+    return VssPersona;
+}(BaseComponent));
+export { VssPersona };

Components/ZeroData/index.js

@@ -1,1 +0,4 @@
-export*from"./ZeroData";export*from"./ZeroData.Props";
+export * from "./ZeroData";
+export * from "./ZeroData.Props";
+// @NOTE: Explicit export list due to typescript compiler bug 18644 where a require is generated for export * when const enum's are present
+//export { ZeroDataActionType, IZeroDataItem, IZeroDataProps, IZeroDataMultipleProps } from "./ZeroData.Props"; 

Components/ZeroData/ZeroData.js

@@ -1,1 +0,83 @@
-import*as tslib_1 from"tslib";import*as React from"react";import{DefaultButton,PrimaryButton}from"office-ui-fabric-react/lib/Button";import{BaseComponent}from"office-ui-fabric-react/lib/Utilities";import"./ZeroData.css";var ZeroData=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return tslib_1.__extends(e,t),e.prototype.render=function(){return React.createElement(ZeroDataMultiple,{items:[this.props]})},e}(BaseComponent);export{ZeroData};var ZeroDataMultiple=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return tslib_1.__extends(e,t),e.prototype.render=function(){var t=this.props.items.length>1;return React.createElement("div",{className:"vss-ZeroData "+(t?"multiple":"single")},this.props.items.map(function(e,a){return React.createElement(ZeroDataItem,{item:e,key:a,multiple:t})}))},e}(BaseComponent),ZeroDataItem=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return tslib_1.__extends(e,t),e.prototype.render=function(){var t,e=this.props.item;return t="string"==typeof e.secondaryText?React.createElement("span",null,e.secondaryText):e.secondaryText,React.createElement("div",{className:"vss-ZeroDataItem"},React.createElement("img",{className:"vss-ZeroDataItem--image",src:e.imagePath,alt:e.imageAltText}),React.createElement("div",{className:"vss-ZeroDataItem--primary "+(this.props.multiple?"ms-font-xl":"ms-font-xxl")},e.primaryText),t&&React.createElement("div",{className:"vss-ZeroDataItem--secondary ms-font-m"},t),this._renderAction(e))},e.prototype._renderAction=function(t){if(!t.actionText)return null;var e={className:"vss-ZeroDataItem--action",text:t.actionText,onClick:function(e){t.onActionClick&&t.onActionClick.call(null,e,t)}};return 0===t.actionType?React.createElement(PrimaryButton,tslib_1.__assign({},e)):React.createElement(DefaultButton,tslib_1.__assign({},e))},e}(BaseComponent);
+import * as tslib_1 from "tslib";
+import * as React from "react";
+import { DefaultButton, PrimaryButton } from "office-ui-fabric-react/lib/Button";
+import { BaseComponent } from "office-ui-fabric-react/lib/Utilities";
+import "./ZeroData.css";
+/**
+ * Component for displaying helpful information when there is no data to show.
+ */
+var ZeroData = /** @class */ (function (_super) {
+    tslib_1.__extends(ZeroData, _super);
+    function ZeroData() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    ZeroData.prototype.render = function () {
+        return React.createElement(ZeroDataMultiple, { items: [this.props] });
+    };
+    return ZeroData;
+}(BaseComponent));
+export { ZeroData };
+/**
+ * Component for displaying helpful information when there is no data to show. This one displays
+ * multiple (or one) ZeroDataItems.
+ *
+ * THIS CLASS IS NOT EXPORTED presently because no design for multiple ZeroDataItems has yet been
+ * approved.
+ */
+var ZeroDataMultiple = /** @class */ (function (_super) {
+    tslib_1.__extends(ZeroDataMultiple, _super);
+    function ZeroDataMultiple() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    ZeroDataMultiple.prototype.render = function () {
+        var multiple = this.props.items.length > 1;
+        return (React.createElement("div", { className: "vss-ZeroData " + (multiple ? "multiple" : "single") }, this.props.items.map(function (item, index) { return React.createElement(ZeroDataItem, { item: item, key: index, multiple: multiple }); })));
+    };
+    return ZeroDataMultiple;
+}(BaseComponent));
+/**
+ * Represents a single item for the ZeroData component.
+ */
+var ZeroDataItem = /** @class */ (function (_super) {
+    tslib_1.__extends(ZeroDataItem, _super);
+    function ZeroDataItem() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    ZeroDataItem.prototype.render = function () {
+        var item = this.props.item;
+        var secondary;
+        if (typeof item.secondaryText === "string") {
+            secondary = React.createElement("span", null, item.secondaryText);
+        }
+        else {
+            secondary = item.secondaryText;
+        }
+        return (React.createElement("div", { className: "vss-ZeroDataItem" },
+            React.createElement("img", { className: "vss-ZeroDataItem--image", src: item.imagePath, alt: item.imageAltText }),
+            React.createElement("div", { className: "vss-ZeroDataItem--primary " + (this.props.multiple ? "ms-font-xl" : "ms-font-xxl") }, item.primaryText),
+            secondary && React.createElement("div", { className: "vss-ZeroDataItem--secondary ms-font-m" }, secondary),
+            this._renderAction(item)));
+    };
+    ZeroDataItem.prototype._renderAction = function (item) {
+        if (!item.actionText) {
+            return null;
+        }
+        var onActionClick = function (ev) {
+            if (item.onActionClick) {
+                item.onActionClick.call(null, ev, item);
+            }
+        };
+        var buttonProps = {
+            className: "vss-ZeroDataItem--action",
+            text: item.actionText,
+            onClick: onActionClick,
+        };
+        if (item.actionType === 0 /* ctaButton */) {
+            return React.createElement(PrimaryButton, tslib_1.__assign({}, buttonProps));
+        }
+        else {
+            return React.createElement(DefaultButton, tslib_1.__assign({}, buttonProps));
+        }
+    };
+    return ZeroDataItem;
+}(BaseComponent));

ContextualMenuButton.js

@@ -1,1 +0,1 @@
-export*from"./Components/ContextualMenuButton/index";
+export * from "./Components/ContextualMenuButton/index";

DateTimePicker.js

@@ -1,1 +0,1 @@
-export*from"./Components/DateTimePicker/index";
+export * from './Components/DateTimePicker/index';

DateTimeRangePicker.js

@@ -1,1 +0,1 @@
-export*from"./Components/DateTimeRangePicker/index";
+export * from './Components/DateTimeRangePicker/index';

Dynamic.js

@@ -1,1 +0,1 @@
-export*from"./Components/Dynamic/index";
+export * from "./Components/Dynamic/index";

FileInput.js

@@ -1,1 +0,1 @@
-export*from"./Components/FileInput/index";
+export * from './Components/FileInput/index';

FilterBar.js

@@ -1,1 +0,1 @@
-export*from"./Components/FilterBar/index";
+export * from './Components/FilterBar/index';

Hub.js

@@ -1,1 +0,1 @@
-export*from"./Components/Hub/index";
+export * from "./Components/Hub/index";

HubHeader.js

@@ -1,1 +0,1 @@
-export*from"./Components/HubHeader/index";
+export * from './Components/HubHeader/index';

IconToggleButton.js

@@ -1,1 +0,1 @@
-export*from"./Components/IconToggleButton/index";
+export * from './Components/IconToggleButton/index';

ItemIndicator.js

@@ -1,1 +0,1 @@
-export*from"./Components/ItemIndicator/index";
+export * from "./Components/ItemIndicator/index";

package.json

 {
     "name": "vss-ui",
-    "version": "3.127.0",
+    "version": "3.127.1",
     "description": "UI Components for building UI in Visual Studio Team Services",
@@ -5,0 +5,0 @@ "author": "Microsoft Corporation",

PickList.js

@@ -1,1 +0,1 @@
-export*from"./Components/PickList/index";
+export * from './Components/PickList/index';

PivotBar.js

@@ -1,1 +0,1 @@
-export*from"./Components/PivotBar/index";
+export * from './Components/PivotBar/index';

Resources/VSS.Resources.VSSUI.js

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

ResponsiveViewport.js

@@ -1,1 +0,1 @@
-export*from"./Components/ResponsiveViewport/index";
+export * from './Components/ResponsiveViewport/index';

Utilities/ChildrenUtils.js

@@ -1,1 +0,16 @@
-import*as React from"react";export function childrenOfType(e,t){var r=[];return React.Children.map(e||[],function(e,n){"object"==typeof e&&e.type===t&&r.push({index:n,item:e})}),r};
+import * as React from 'react';
+/**
+ * Gets the children of the specified type (includes child index as well).
+ *
+ * @param props Container props including children.
+ * @param type Type of the children.
+ */
+export function childrenOfType(children, type) {
+    var found = [];
+    React.Children.map(children || [], function (item, index) {
+        if (typeof item === 'object' && item.type === type) {
+            found.push({ index: index, item: item });
+        }
+    });
+    return found;
+}

Utilities/Filter.js

@@ -1,1 +0,210 @@
-import*as tslib_1 from"tslib";import{assign,EventGroup}from"office-ui-fabric-react/lib/Utilities";import{Observable}from"./Observable";export var FILTER_CHANGE_EVENT="filter-changed";export var FILTER_APPLIED_EVENT="filter-applied";export var FILTER_RESET_EVENT="reset-filters";var Filter=function(){function t(t,e){void 0===t&&(t={}),this.observable=e||new Observable,this.applyMode=!!t.useApplyMode,this.defaultState=assign({},t.defaultState),this.currentState=assign({},this.defaultState),this.applyMode?this.appliedState=assign({},this.currentState):this.appliedState=this.currentState}return t.prototype.subscribe=function(t,e){this.observable.subscribe(t,e)},t.prototype.unsubscribe=function(t,e){this.observable.unsubscribe(t,e)},t.prototype.getState=function(){return tslib_1.__assign({},this.currentState)},t.prototype.getAppliedState=function(){return tslib_1.__assign({},this.appliedState)},t.prototype.getDefaultState=function(){return this.defaultState},t.prototype.setDefaultState=function(t){this.defaultState=t},t.prototype.setState=function(t,e){void 0===e&&(e=!1);var r=this.currentState;if(this.currentState=assign({},t),this.applyMode||(this.appliedState=this.currentState),!e){var i=assign({},t);for(var a in r)t.hasOwnProperty(a)||(i[a]=null);this._triggerStateChange(i)}},t.prototype.getFilterItemState=function(t){return this.currentState[t]},t.prototype.getAppliedFilterItemState=function(t){return this.appliedState[t]},t.prototype.getFilterItemValue=function(t){var e=this.currentState[t];return e?e.value:void 0},t.prototype.setFilterItemState=function(t,e){this.currentState[t]=e;var r={};r[t]=e,this._triggerStateChange(r)},t.prototype.reset=function(){this.setState(this.defaultState),EventGroup.raise(this,FILTER_RESET_EVENT)},t.prototype.applyChanges=function(){this.appliedState=assign({},this.currentState),this._raiseEventAndCallListeners(FILTER_APPLIED_EVENT,this.appliedState)},t.prototype.usesApplyMode=function(){return this.applyMode},t.prototype.hasChangesToApply=function(){return!t.statesAreEqual(this.appliedState,this.currentState)},t.prototype.hasChangesToReset=function(){return!t.statesAreEqual(this.defaultState,this.currentState)},t.prototype._triggerStateChange=function(t){this._raiseEventAndCallListeners(FILTER_CHANGE_EVENT,t),this.applyMode||this._raiseEventAndCallListeners(FILTER_APPLIED_EVENT,t)},t.prototype._raiseEventAndCallListeners=function(t,e){EventGroup.raise(this,t,e),this.observable.notify(e,t)},t.statesAreEqual=function(t,e){return this._checkStateEquality(t,e)&&this._checkStateEquality(e,t)},t._checkStateEquality=function(t,e){for(var r in t){var i=t[r],a=e[r],s=i&&i.value,n=a&&a.value;if(Array.isArray(s)){if(Array.isArray(n)){if(s.length!==n.length)return!1;for(var o=0;o<s.length;o++)if(s[o]!==n[o])return!1}else if(0!==s.length||n)return!1}else if(s){if(s!==n)return!1}else if(Array.isArray(n)){if(0!==n.length)return!1}else if(!!s!=!!n)return!1}return!0},t}();export{Filter};
+import * as tslib_1 from "tslib";
+import { assign, EventGroup } from 'office-ui-fabric-react/lib/Utilities';
+import { Observable } from './Observable';
+export var FILTER_CHANGE_EVENT = 'filter-changed';
+export var FILTER_APPLIED_EVENT = 'filter-applied';
+export var FILTER_RESET_EVENT = 'reset-filters';
+/**
+ * Store for a set of filter values
+ *
+ * Events:
+ *
+ *  FILTER_CHANGE_EVENT: IFilterState
+ *  Fired whenever a filter value changes. The event object contains the changed items.
+ *  When using explicit apply-mode, this event is fired when the filter is changed (i.e. by user action)
+ *  but not yet applied.
+ *
+ *  FILTER_APPLIED_EVENT: IFilterState
+ *  Fired when new filter changes have been applied. The event object contains the changed items.
+ *  When not using explicit apply-mode, this event is fired on every state change
+ */
+var Filter = /** @class */ (function () {
+    /**
+     * Create a new Filter store
+     * @param options Options for the filter store
+     */
+    function Filter(options, observable) {
+        if (options === void 0) { options = {}; }
+        this.observable = observable || new Observable();
+        this.applyMode = !!options.useApplyMode;
+        this.defaultState = assign({}, options.defaultState);
+        this.currentState = assign({}, this.defaultState);
+        if (this.applyMode) {
+            this.appliedState = assign({}, this.currentState);
+        }
+        else {
+            this.appliedState = this.currentState;
+        }
+    }
+    Filter.prototype.subscribe = function (observer, action) {
+        this.observable.subscribe(observer, action);
+    };
+    Filter.prototype.unsubscribe = function (observer, action) {
+        this.observable.unsubscribe(observer, action);
+    };
+    /**
+     * Gets a dictionary containing the current values of all filter items
+     */
+    Filter.prototype.getState = function () {
+        return tslib_1.__assign({}, this.currentState);
+    };
+    /**
+     * Gets a dictionary containing the applied values of all filter items.
+     * When useApplyMode is false, this always matches the value returned by getState.
+     */
+    Filter.prototype.getAppliedState = function () {
+        return tslib_1.__assign({}, this.appliedState);
+    };
+    /**
+     * Gets a dictionary containing the default values of all filter items
+     */
+    Filter.prototype.getDefaultState = function () {
+        return this.defaultState;
+    };
+    /**
+     * Update what the filter considers as its default state
+     * @param defaultState The new default state
+     */
+    Filter.prototype.setDefaultState = function (defaultState) {
+        this.defaultState = defaultState;
+    };
+    /**
+     * Sets the current values of all filter items
+     * @param state Dictionary of all current filter item values
+     * @param supressChangeEvent If true, don't invoke the onFilterChanged callback at this time
+     */
+    Filter.prototype.setState = function (state, supressChangeEvent) {
+        if (supressChangeEvent === void 0) { supressChangeEvent = false; }
+        var prevState = this.currentState;
+        this.currentState = assign({}, state);
+        if (!this.applyMode) {
+            this.appliedState = this.currentState;
+        }
+        if (!supressChangeEvent) {
+            var changedState = assign({}, state);
+            for (var key in prevState) {
+                // Add current filters that are cleared by the new state
+                // (i.e. these changed from "something" to "nothing")
+                if (!state.hasOwnProperty(key)) {
+                    changedState[key] = null;
+                }
+            }
+            this._triggerStateChange(changedState);
+        }
+    };
+    /**
+     * Gets the value of the specified filter item
+     * @param key Filter item key
+     */
+    Filter.prototype.getFilterItemState = function (key) {
+        return this.currentState[key];
+    };
+    /**
+     * Gets the applied value of the specified filter item. When applyMode is false,
+     * this is equivalent to getFilterItemState.
+     * @param key Filter item key
+     */
+    Filter.prototype.getAppliedFilterItemState = function (key) {
+        return this.appliedState[key];
+    };
+    /**
+     * Gets the value property for the filter item with the given key.
+     * @param key The filter item's key
+     */
+    Filter.prototype.getFilterItemValue = function (key) {
+        var item = this.currentState[key];
+        if (item) {
+            return item.value;
+        }
+        else {
+            return undefined;
+        }
+    };
+    /**
+     * Sets the value of the specified filter item
+     * @param key Filter item key
+     * @param value Filter value
+     */
+    Filter.prototype.setFilterItemState = function (key, value) {
+        this.currentState[key] = value;
+        var changeEvent = {};
+        changeEvent[key] = value;
+        this._triggerStateChange(changeEvent);
+    };
+    /**
+     * Resets the filter values to their default state
+     */
+    Filter.prototype.reset = function () {
+        this.setState(this.defaultState);
+        EventGroup.raise(this, FILTER_RESET_EVENT);
+    };
+    Filter.prototype.applyChanges = function () {
+        this.appliedState = assign({}, this.currentState);
+        this._raiseEventAndCallListeners(FILTER_APPLIED_EVENT, this.appliedState);
+    };
+    Filter.prototype.usesApplyMode = function () {
+        return this.applyMode;
+    };
+    Filter.prototype.hasChangesToApply = function () {
+        return !Filter.statesAreEqual(this.appliedState, this.currentState);
+    };
+    Filter.prototype.hasChangesToReset = function () {
+        return !Filter.statesAreEqual(this.defaultState, this.currentState);
+    };
+    Filter.prototype._triggerStateChange = function (changedState) {
+        this._raiseEventAndCallListeners(FILTER_CHANGE_EVENT, changedState);
+        if (!this.applyMode) {
+            this._raiseEventAndCallListeners(FILTER_APPLIED_EVENT, changedState);
+        }
+    };
+    Filter.prototype._raiseEventAndCallListeners = function (eventName, changedState) {
+        EventGroup.raise(this, eventName, changedState);
+        this.observable.notify(changedState, eventName);
+    };
+    Filter.statesAreEqual = function (state1, state2) {
+        return this._checkStateEquality(state1, state2) && this._checkStateEquality(state2, state1);
+    };
+    Filter._checkStateEquality = function (state1, state2) {
+        for (var item in state1) {
+            var item1State = state1[item];
+            var item2State = state2[item];
+            var item1Value = item1State && item1State.value;
+            var item2Value = item2State && item2State.value;
+            if (Array.isArray(item1Value)) {
+                if (Array.isArray(item2Value)) {
+                    if (item1Value.length !== item2Value.length) {
+                        return false;
+                    }
+                    for (var index = 0; index < item1Value.length; index++) {
+                        if (item1Value[index] !== item2Value[index]) {
+                            return false;
+                        }
+                    }
+                }
+                else {
+                    if (item1Value.length !== 0 || !!item2Value) {
+                        return false;
+                    }
+                }
+            }
+            else if (item1Value) {
+                if (item1Value !== item2Value) {
+                    return false;
+                }
+            }
+            else if (Array.isArray(item2Value)) {
+                if (item2Value.length !== 0) {
+                    return false;
+                }
+            }
+            else {
+                if (!!item1Value !== !!item2Value) {
+                    return false;
+                }
+            }
+        }
+        return true;
+    };
+    return Filter;
+}());
+export { Filter };

Utilities/HubViewState.js

@@ -1,1 +0,77 @@
-import*as tslib_1 from"tslib";import{ViewState,ViewStateFilter,ViewStateOptions,ViewStateObservableValue}from"./ViewState";export var HubViewOptionKeys;!function(e){e.showFilterBar="showFilters",e.fullScreen="fullScreen"}(HubViewOptionKeys||(HubViewOptionKeys={}));export var HubViewStateEventNames;!function(e){e.pivotChanging="pivotChanging",e.filterChanging="filterChanging",e.viewOptionsChanging="viewOptionsChanging"}(HubViewStateEventNames||(HubViewStateEventNames={}));var HubViewState=function(e){function t(t){void 0===t&&(t={});var i=e.call(this)||this;return i._viewOptions=new ViewStateOptions(i.notify.bind(i),HubViewStateEventNames.viewOptionsChanging,t.viewOptions),i._filter=new ViewStateFilter(i.notify.bind(i),HubViewStateEventNames.filterChanging,t.filterOptions),i._selectedPivot=new ViewStateObservableValue(i.notify.bind(i),HubViewStateEventNames.pivotChanging,t.defaultPivot),i}return tslib_1.__extends(t,e),Object.defineProperty(t.prototype,"selectedPivot",{get:function(){return this._selectedPivot},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"filter",{get:function(){return this._filter},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"viewOptions",{get:function(){return this._viewOptions},enumerable:!0,configurable:!0}),t}(ViewState);export{HubViewState};
+import * as tslib_1 from "tslib";
+import { ViewState, ViewStateFilter, ViewStateOptions, ViewStateObservableValue } from './ViewState';
+/**
+ * The keys for common view options known by the Hub component
+ */
+export var HubViewOptionKeys;
+(function (HubViewOptionKeys) {
+    /**
+     * View option controlling whether or not the hub filter bar is being displayed.
+     */
+    HubViewOptionKeys.showFilterBar = 'showFilters';
+    /**
+     * View option controlling whether or not the page is in full-screen mode
+     */
+    HubViewOptionKeys.fullScreen = 'fullScreen';
+})(HubViewOptionKeys || (HubViewOptionKeys = {}));
+/**
+ * Names of observable events triggered by hub view state
+ */
+export var HubViewStateEventNames;
+(function (HubViewStateEventNames) {
+    /**
+     * Event fired when the pivot is being changed. Consumers can listen for this
+     * event and modify other view state values. This event is not fired when
+     * the selected pivot value is changed during the processing of another view-state's event.
+     */
+    HubViewStateEventNames.pivotChanging = 'pivotChanging';
+    /**
+     * Event fired when the applied filter is being changed. Consumers can listen for this
+     * event and modify other view state values. This event is not fired when
+     * the filter is changed during the processing of another view-state's event.
+     */
+    HubViewStateEventNames.filterChanging = 'filterChanging';
+    /**
+     * Event fired when a view option value is being changed. Consumers can listen for this
+     * event and modify other view state values. This event is not fired when
+     * a view option value is changed during the processing of another view-state's event.
+     */
+    HubViewStateEventNames.viewOptionsChanging = 'viewOptionsChanging';
+})(HubViewStateEventNames || (HubViewStateEventNames = {}));
+/**
+ * Store for the current view of a hub (selected pivot, filters, view options, etc.)
+ */
+var HubViewState = /** @class */ (function (_super) {
+    tslib_1.__extends(HubViewState, _super);
+    function HubViewState(options) {
+        if (options === void 0) { options = {}; }
+        var _this = _super.call(this) || this;
+        _this._viewOptions = new ViewStateOptions(_this.notify.bind(_this), HubViewStateEventNames.viewOptionsChanging, options.viewOptions);
+        _this._filter = new ViewStateFilter(_this.notify.bind(_this), HubViewStateEventNames.filterChanging, options.filterOptions);
+        _this._selectedPivot = new ViewStateObservableValue(_this.notify.bind(_this), HubViewStateEventNames.pivotChanging, options.defaultPivot);
+        return _this;
+    }
+    Object.defineProperty(HubViewState.prototype, "selectedPivot", {
+        get: function () {
+            return this._selectedPivot;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(HubViewState.prototype, "filter", {
+        get: function () {
+            return this._filter;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(HubViewState.prototype, "viewOptions", {
+        get: function () {
+            return this._viewOptions;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    return HubViewState;
+}(ViewState));
+export { HubViewState };

Utilities/Internal.js

@@ -1,1 +0,40 @@
-export function arrayEquals(r,t,e){if(void 0===e&&(e=function(r,t){return r===t}),!r||!t)return!1;if(r.length!==t.length)return!1;for(var n=0;n<r.length;n++)if(!e(r[n],t[n]))return!1;return!0};export function closest(r,t){if(r&&r.closest)return r.closest(t);for(;r&&!(r.matches||r.msMatchesSelector).call(r,t);)r=r.parentElement;return r};
+/**
+ * Checks two arrays to see they contain equal elements in the same order.
+ *
+ * @param array1 First array to check.
+ * @param array2 Second array to check.
+ * @param comparer Optional comparer to check whether array items are equal. If not specified, items are compared using strict equals.
+ * @returns {boolean}
+ */
+export function arrayEquals(array1, array2, comparer) {
+    if (comparer === void 0) { comparer = function (item1, item2) { return item1 === item2; }; }
+    if (!array1 || !array2) {
+        return false;
+    }
+    if (array1.length !== array2.length) {
+        return false;
+    }
+    for (var i = 0; i < array1.length; i++) {
+        if (!comparer(array1[i], array2[i])) {
+            return false;
+        }
+    }
+    return true;
+}
+/**
+ * Gets the closest ancestor of the element (or the element itself) using a query selector.
+ *
+ * @param element Starting element.
+ * @param query Query to locate.
+ * @returns {Element}
+ */
+export function closest(element, query) {
+    if (element && element.closest) {
+        return element.closest(query);
+    }
+    // for IE11 and below
+    while (element && !(element.matches || element.msMatchesSelector).call(element, query)) {
+        element = element.parentElement;
+    }
+    return element;
+}

Utilities/ItemContribution.js

@@ -1,1 +0,15 @@
-import*as tslib_1 from"tslib";import{ObservableArray}from"./Observable";var ContributedItemArray=function(r){function t(t,e){var a=r.call(this,[])||this;return t.loadItems(function(r){a.items=(r||[]).map(e)}),a}return tslib_1.__extends(t,r),t}(ObservableArray);export{ContributedItemArray};
+import * as tslib_1 from "tslib";
+import { ObservableArray } from "./Observable";
+var ContributedItemArray = /** @class */ (function (_super) {
+    tslib_1.__extends(ContributedItemArray, _super);
+    function ContributedItemArray(itemProvider, mapDelegate) {
+        var _this = _super.call(this, []) || this;
+        itemProvider.loadItems(function (items) {
+            // When contributed items become available, update observable array
+            _this.items = (items || []).map(mapDelegate);
+        });
+        return _this;
+    }
+    return ContributedItemArray;
+}(ObservableArray));
+export { ContributedItemArray };

Utilities/Observable.js

@@ -1,1 +0,211 @@
-import*as tslib_1 from"tslib";var Observable=function(){function e(){this.observers={}}return e.prototype.notify=function(e,t,r){if(this.observers[t])for(var s=this.observers[t].slice(),n=0;n<s.length;n++)s[n](e,t);if(this.observers[""])for(var s=this.observers[""].slice(),n=0;n<s.length;n++)s[n](e,t);r&&(this.events||(this.events=[]),this.events.push({action:t,value:e}))},e.prototype.subscribe=function(e,t){if(t=t||"",this.observers[t]||(this.observers[t]=[]),this.observers[t].push(e),this.events)for(var r=0,s=this.events;r<s.length;r++){var n=s[r];this.notify(n.value,n.action,!1)}},e.prototype.unsubscribe=function(e,t){if(t=t||"",this.observers[t]){var r=this.observers[t].indexOf(e);r>=0&&this.observers[t].splice(r,1)}},e}();export{Observable};var ObservableValue=function(e){function t(t){var r=e.call(this)||this;return r.v=t,r}return tslib_1.__extends(t,e),Object.defineProperty(t.prototype,"value",{get:function(){return this.v},set:function(e){this.v=e,this.notify(e,"set")},enumerable:!0,configurable:!0}),t}(Observable);export{ObservableValue};export var ObservableLike;!function(e){function t(e){return e&&"function"==typeof e.subscribe}e.isObservable=t,e.getValue=function(e){return t(e)?e.value:e},e.subscribe=function(e,r,s){t(e)&&e.subscribe(r,s)},e.unsubscribe=function(e,r,s){t(e)&&e.unsubscribe(r,s)}}(ObservableLike||(ObservableLike={}));var ObservableArray=function(e){function t(t){void 0===t&&(t=[]);var r=e.call(this)||this;return r.internalItems=t||[],r}return tslib_1.__extends(t,e),t.prototype.push=function(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];return(r=this.internalItems).push.apply(r,e),this.notify({addedItems:e},"push"),e.length;var r},t.prototype.pop=function(){var e=this.internalItems.pop();return void 0!==e&&this.notify({removedItems:[e]},"pop"),e},t.prototype.splice=function(e,t){for(var r=[],s=2;s<arguments.length;s++)r[s-2]=arguments[s];var n=(i=this.internalItems).splice.apply(i,[e,t].concat(r));return this.notify({addedItems:r,removedItems:n},"splice"),n;var i},t.prototype.indexOf=function(e,t){return this.internalItems.indexOf(e,t)},Object.defineProperty(t.prototype,"items",{get:function(){return this.internalItems.slice()},set:function(e){this.splice.apply(this,[0,this.length].concat(e))},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"length",{get:function(){return this.internalItems.length},enumerable:!0,configurable:!0}),t}(Observable);export{ObservableArray};
+import * as tslib_1 from "tslib";
+/**
+ * An Observable implementation that will track a set of subscribers and supports
+ * notifications when the underlying system changes.
+ */
+var Observable = /** @class */ (function () {
+    function Observable() {
+        this.observers = {};
+    }
+    /**
+     * notify is used to send the event to all subscribers that have signed up for this events
+     * action. This means they have subscribed directly to this action, or to all actions.
+     * If the caller requested the event be persisted the event will be fired in order to new
+     * subscribers as well when they subscribe.
+     *
+     * @param event - The object that represents the event that has occurred.
+     *
+     * @param persistEvent - Optional value that determines if all future subscribers will
+     *  recieve the event as well.
+     */
+    Observable.prototype.notify = function (value, action, persistEvent) {
+        // NOTE: We need to make a copy of the observers since they may change during notification.
+        if (this.observers[action]) {
+            var observers = this.observers[action].slice();
+            for (var observerIndex = 0; observerIndex < observers.length; observerIndex++) {
+                observers[observerIndex](value, action);
+            }
+        }
+        if (this.observers[""]) {
+            var observers = this.observers[""].slice();
+            for (var observerIndex = 0; observerIndex < observers.length; observerIndex++) {
+                observers[observerIndex](value, action);
+            }
+        }
+        // If the caller wants this event sent to all subscribers, event future ones, track it.
+        if (persistEvent) {
+            if (!this.events) {
+                this.events = [];
+            }
+            this.events.push({ action: action, value: value });
+        }
+    };
+    Observable.prototype.subscribe = function (observer, action) {
+        action = action || "";
+        if (!this.observers[action]) {
+            this.observers[action] = [];
+        }
+        this.observers[action].push(observer);
+        // Fire the callback for any events that were persisted when they were sent.
+        if (this.events) {
+            for (var _i = 0, _a = this.events; _i < _a.length; _i++) {
+                var event_1 = _a[_i];
+                this.notify(event_1.value, event_1.action, false);
+            }
+        }
+    };
+    Observable.prototype.unsubscribe = function (observer, action) {
+        action = action || "";
+        if (this.observers[action]) {
+            var observerIndex = this.observers[action].indexOf(observer);
+            if (observerIndex >= 0) {
+                this.observers[action].splice(observerIndex, 1);
+            }
+        }
+    };
+    return Observable;
+}());
+export { Observable };
+var ObservableValue = /** @class */ (function (_super) {
+    tslib_1.__extends(ObservableValue, _super);
+    function ObservableValue(value) {
+        var _this = _super.call(this) || this;
+        _this.v = value;
+        return _this;
+    }
+    Object.defineProperty(ObservableValue.prototype, "value", {
+        get: function () {
+            return this.v;
+        },
+        set: function (value) {
+            this.v = value;
+            this.notify(value, "set");
+        },
+        enumerable: true,
+        configurable: true
+    });
+    return ObservableValue;
+}(Observable));
+export { ObservableValue };
+export var ObservableLike;
+(function (ObservableLike) {
+    /**
+     * Check whether the specified object is an observable or not.
+     *
+     * @param observableLike Object to perform observable check.
+     */
+    function isObservable(observableLike) {
+        return observableLike && typeof observableLike.subscribe === "function";
+    }
+    ObservableLike.isObservable = isObservable;
+    /**
+     * Gets the value of the specified observable like. If not observable, returns the passed argument.
+     *
+     * @param observableLike Object to get the value.
+     * @returns Observable value or the observable like itself.
+     */
+    function getValue(observableLike) {
+        if (isObservable(observableLike)) {
+            return observableLike.value;
+        }
+        return observableLike;
+    }
+    ObservableLike.getValue = getValue;
+    /**
+     * Subscribes to the specified object if it is an observable.
+     *
+     * @param observableLike Object to subscribe its value change if applicable.
+     * @param observer Delegate to be executed when the underlying data changes.
+     * @param action Optional argument that allows the consumer to supply a action
+     *  with the delegate. If the action is supplied only those actions are delievered,
+     *  while all actions are delivered is no action is supplied.
+     */
+    function subscribe(observableLike, observer, action) {
+        if (isObservable(observableLike)) {
+            observableLike.subscribe(observer, action);
+        }
+    }
+    ObservableLike.subscribe = subscribe;
+    /**
+     * Unsubscribes from the specified object if it is an observable.
+     *
+     * @param observableLike Object to subscribe its value change if applicable.
+     * @param observer Delegate to be executed when the underlying data changes.
+     * @param action Optional argument that allows the consumer to supply a action
+     *  with the delegate. If the action is supplied only those actions are delievered,
+     *  while all actions are delivered is no action is supplied.
+     */
+    function unsubscribe(observableLike, observer, action) {
+        if (isObservable(observableLike)) {
+            observableLike.unsubscribe(observer, action);
+        }
+    }
+    ObservableLike.unsubscribe = unsubscribe;
+})(ObservableLike || (ObservableLike = {}));
+/**
+ * WARNING: A copy of this interface also exists in WebPlatform\Web\extensions\vss-web\vss-platform\Context.ts
+ * Please make sure that you keep both instances in sync.
+ *
+ * EventTypes:
+ *  push - { addedItems }
+ *  pop - { removedItems}
+ *  splice - { addedItems, removedItems }
+ */
+var ObservableArray = /** @class */ (function (_super) {
+    tslib_1.__extends(ObservableArray, _super);
+    function ObservableArray(items) {
+        if (items === void 0) { items = []; }
+        var _this = _super.call(this) || this;
+        _this.internalItems = items || [];
+        return _this;
+    }
+    ObservableArray.prototype.push = function () {
+        var items = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            items[_i] = arguments[_i];
+        }
+        (_a = this.internalItems).push.apply(_a, items);
+        this.notify({ addedItems: items }, "push");
+        return items.length;
+        var _a;
+    };
+    ObservableArray.prototype.pop = function () {
+        var item = this.internalItems.pop();
+        if (item !== undefined) {
+            this.notify({ removedItems: [item] }, "pop");
+        }
+        return item;
+    };
+    ObservableArray.prototype.splice = function (start, deleteCount) {
+        var itemsToAdd = [];
+        for (var _i = 2; _i < arguments.length; _i++) {
+            itemsToAdd[_i - 2] = arguments[_i];
+        }
+        var removedItems = (_a = this.internalItems).splice.apply(_a, [start, deleteCount].concat(itemsToAdd));
+        this.notify({ addedItems: itemsToAdd, removedItems: removedItems }, "splice");
+        return removedItems;
+        var _a;
+    };
+    ObservableArray.prototype.indexOf = function (item, fromIndex) {
+        return this.internalItems.indexOf(item, fromIndex);
+    };
+    Object.defineProperty(ObservableArray.prototype, "items", {
+        get: function () {
+            return this.internalItems.slice();
+        },
+        set: function (items) {
+            this.splice.apply(this, [0, this.length].concat(items));
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ObservableArray.prototype, "length", {
+        get: function () {
+            return this.internalItems.length;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    return ObservableArray;
+}(Observable));
+export { ObservableArray };

Utilities/ViewOptions.js

@@ -1,1 +0,73 @@
-import*as tslib_1 from"tslib";import{EventGroup}from"office-ui-fabric-react/lib/Utilities";import{Observable}from"./Observable";export var VIEW_OPTIONS_CHANGE_EVENT="view-option-changed";var ViewOptions=function(){function t(t,e){void 0===t&&(t={}),this.observable=e||new Observable,this.currentState=tslib_1.__assign({},t.initialState)}return t.prototype.subscribe=function(t,e){this.observable.subscribe(t,e)},t.prototype.unsubscribe=function(t,e){this.observable.unsubscribe(t,e)},t.prototype.getViewOptions=function(){return tslib_1.__assign({},this.currentState)},t.prototype.setViewOptions=function(t,e){var i=this.currentState;if(this.currentState=tslib_1.__assign({},t),!e){var r=tslib_1.__assign({},t);for(var n in i)t.hasOwnProperty(n)||(r[n]=null);this._triggerStateChange(r)}},t.prototype.clear=function(){this.setViewOptions({})},t.prototype.getViewOption=function(t){return this.currentState[t]},t.prototype.setViewOption=function(t,e){this.currentState[t]=e;var i={};i[t]=e,this._triggerStateChange(i)},t.prototype._triggerStateChange=function(t){EventGroup.raise(this,VIEW_OPTIONS_CHANGE_EVENT,t),this.observable.notify(t,VIEW_OPTIONS_CHANGE_EVENT)},t}();export{ViewOptions};
+import * as tslib_1 from "tslib";
+import { EventGroup } from 'office-ui-fabric-react/lib/Utilities';
+import { Observable } from './Observable';
+export var VIEW_OPTIONS_CHANGE_EVENT = 'view-option-changed';
+var ViewOptions = /** @class */ (function () {
+    function ViewOptions(props, observable) {
+        if (props === void 0) { props = {}; }
+        this.observable = observable || new Observable();
+        this.currentState = tslib_1.__assign({}, props.initialState);
+    }
+    ViewOptions.prototype.subscribe = function (observer, action) {
+        this.observable.subscribe(observer, action);
+    };
+    ViewOptions.prototype.unsubscribe = function (observer, action) {
+        this.observable.unsubscribe(observer, action);
+    };
+    /**
+     * Gets a dictionary containing the current values of all view options.
+     */
+    ViewOptions.prototype.getViewOptions = function () {
+        return tslib_1.__assign({}, this.currentState);
+    };
+    /**
+     * Sets the current values of all view options.
+     * @param state Dictionary of all current view option values.
+     * @param supressChangeEvent If true, don't invoke the onViewOptionsChanged callback at this time
+     */
+    ViewOptions.prototype.setViewOptions = function (state, supressChangeEvent) {
+        var prevState = this.currentState;
+        this.currentState = tslib_1.__assign({}, state);
+        if (!supressChangeEvent) {
+            var changedState = tslib_1.__assign({}, state);
+            for (var key in prevState) {
+                // Add current view options that are cleared by the new state
+                // (i.e. these changed from "something" to "nothing")
+                if (!state.hasOwnProperty(key)) {
+                    changedState[key] = null;
+                }
+            }
+            this._triggerStateChange(changedState);
+        }
+    };
+    /**
+     * Clears all view option values
+     */
+    ViewOptions.prototype.clear = function () {
+        this.setViewOptions({});
+    };
+    /**
+     * Gets the value of the view option.
+     * @param key View option item key.
+     */
+    ViewOptions.prototype.getViewOption = function (key) {
+        return this.currentState[key];
+    };
+    /**
+     * Sets the current value of the specified option.
+     * @param key Key of the view option.
+     * @param supressChangeEvent If true, don't invoke the onViewOptionsChanged callback at this time
+     */
+    ViewOptions.prototype.setViewOption = function (key, value) {
+        this.currentState[key] = value;
+        var changedState = {};
+        changedState[key] = value;
+        this._triggerStateChange(changedState);
+    };
+    ViewOptions.prototype._triggerStateChange = function (changedState) {
+        EventGroup.raise(this, VIEW_OPTIONS_CHANGE_EVENT, changedState);
+        this.observable.notify(changedState, VIEW_OPTIONS_CHANGE_EVENT);
+    };
+    return ViewOptions;
+}());
+export { ViewOptions };

Utilities/ViewState.js

@@ -1,1 +0,220 @@
-import*as tslib_1 from"tslib";import{Observable}from"./Observable";import{Filter,FILTER_CHANGE_EVENT}from"./Filter";import{ViewOptions}from"./ViewOptions";export var ViewStateEventNames;!function(e){e.viewStateChanging="viewStateChanging",e.viewStateChanged="viewStateChanged"}(ViewStateEventNames||(ViewStateEventNames={}));var ViewState=function(){function e(){this.observable=new Observable}return e.prototype.subscribe=function(e,t){this.observable.subscribe(e,t)},e.prototype.unsubscribe=function(e,t){this.observable.unsubscribe(e,t)},e.prototype.notify=function(e,t,n,i,a){if(this.changingEvents){if(n&&a){for(var s=!1,r=0,o=this.changingEvents;r<o.length;r++){var v=o[r];if(v.observable===n&&v.eventName===i){var l=n;l.mergeChangeEvents?v.eventValue=l.mergeChangeEvents(v.eventValue,e):v.eventValue=e,s=!0;break}}s||this.changingEvents.push({observable:n,eventName:i,eventValue:e,notify:a})}}else{this.changingEvents=[],n&&a&&this.changingEvents.push({observable:n,eventName:i,eventValue:e,notify:a});var b={eventName:t,eventValue:e};this.observable.notify(b,ViewStateEventNames.viewStateChanging),this.observable.notify(e,t);for(var u=0,h=this.changingEvents;u<h.length;u++){var p=h[u];p.notify(p.eventValue,p.eventName)}this.changingEvents=null,this.observable.notify(b,ViewStateEventNames.viewStateChanged)}},e}();export{ViewState};var ViewStateObservable=function(e){function t(t,n,i,a){var s=e.call(this)||this;return s.notifyViewStateDelegate=t,s.viewStateEventName=n,s.mergeEventsAsObjects=i,s}return tslib_1.__extends(t,e),t.prototype.notify=function(t,n,i){this.shouldBypassViewState(t,n,i)?e.prototype.notify.call(this,t,n,i):this.notifyViewStateDelegate(t,this.viewStateEventName,this,n,e.prototype.notify.bind(this))},t.prototype.shouldBypassViewState=function(e,t,n){return!1},t.prototype.mergeChangeEvents=function(e,t){return t},t}(Observable);export{ViewStateObservable};var ViewStateObservableValue=function(e){function t(t,n,i){var a=e.call(this,t,n)||this;return a.v=i,a}return tslib_1.__extends(t,e),Object.defineProperty(t.prototype,"value",{get:function(){return this.v},set:function(e){e!==this.v&&(this.v=e,this.notify(e,"set"))},enumerable:!0,configurable:!0}),t}(ViewStateObservable);export{ViewStateObservableValue};var ViewStateFilter=function(e){function t(t,n,i){return e.call(this,i,new ViewStateFilterObservable(t,n))||this}return tslib_1.__extends(t,e),t}(Filter);export{ViewStateFilter};var ViewStateFilterObservable=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return tslib_1.__extends(t,e),t.prototype.shouldBypassViewState=function(e,t,n){return t!==FILTER_CHANGE_EVENT},t.prototype.mergeChangeEvents=function(e,t){return tslib_1.__assign({},e,t)},t}(ViewStateObservable),ViewStateOptions=function(e){function t(t,n,i){return e.call(this,i,new ViewStateOptionsObservable(t,n))||this}return tslib_1.__extends(t,e),t}(ViewOptions);export{ViewStateOptions};var ViewStateOptionsObservable=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return tslib_1.__extends(t,e),t.prototype.mergeChangeEvents=function(e,t){return tslib_1.__assign({},e,t)},t}(ViewStateObservable);
+import * as tslib_1 from "tslib";
+import { Observable } from './Observable';
+import { Filter, FILTER_CHANGE_EVENT } from './Filter';
+import { ViewOptions } from './ViewOptions';
+/**
+ * Names of events fired by view state
+ */
+export var ViewStateEventNames;
+(function (ViewStateEventNames) {
+    /**
+     * One or more members of the view state is changing
+     */
+    ViewStateEventNames.viewStateChanging = 'viewStateChanging';
+    /**
+     * One or more members of the view state was changed.
+     */
+    ViewStateEventNames.viewStateChanged = 'viewStateChanged';
+})(ViewStateEventNames || (ViewStateEventNames = {}));
+/**
+ * Store for properties of a view
+ */
+var ViewState = /** @class */ (function () {
+    function ViewState() {
+        this.observable = new Observable();
+    }
+    ViewState.prototype.subscribe = function (observer, action) {
+        this.observable.subscribe(observer, action);
+    };
+    ViewState.prototype.unsubscribe = function (observer, action) {
+        this.observable.unsubscribe(observer, action);
+    };
+    /**
+     * Notify listeners that a state value is changing. The sequence of events goes like this:
+     *
+     * 1. The 'viewStateChanging' event is fired
+     * 2. The 'viewStateEventName' event is fired, letting consumers update state in reaction to the change.
+     *    While these listeners are processing, individual state change events are suppresed.
+     * 3. The observable event specified here is triggered
+     * 4. The events from any state changed as part of the event listeners in step 2 are triggered.
+     * 5. The 'viewStateChanged' event is fired
+     *
+     * @param eventValue The value of the state that was changed
+     * @param viewStateEventName The name of the state-change event to fire
+     * @param observable The observable that is firing the event
+     * @param observableEventName Name of the specific event that should be triggered on the observable
+     * @param observableNotify Method to directly notify the observable's consumers
+     */
+    ViewState.prototype.notify = function (eventValue, viewStateEventName, observable, observableEventName, observableNotify) {
+        if (this.changingEvents) {
+            // Already in the middle of a change event. Just queue the event.
+            if (observable && observableNotify) {
+                // If we have an existing event with this same observable/eventName, just update its value.
+                var updatedExistingEvent = false;
+                for (var _i = 0, _a = this.changingEvents; _i < _a.length; _i++) {
+                    var existingEvent = _a[_i];
+                    if (existingEvent.observable === observable && existingEvent.eventName === observableEventName) {
+                        var viewStateObservable = observable;
+                        if (viewStateObservable.mergeChangeEvents) {
+                            existingEvent.eventValue = viewStateObservable.mergeChangeEvents(existingEvent.eventValue, eventValue);
+                        }
+                        else {
+                            existingEvent.eventValue = eventValue;
+                        }
+                        updatedExistingEvent = true;
+                        break;
+                    }
+                }
+                // New observable/event. Add it to our queue.
+                if (!updatedExistingEvent) {
+                    this.changingEvents.push({
+                        observable: observable,
+                        eventName: observableEventName,
+                        eventValue: eventValue,
+                        notify: observableNotify
+                    });
+                }
+            }
+        }
+        else {
+            // Create a queue of callbacks. This queue will bock (but remember) events
+            // from individual observables from firing until all the view-state-change
+            // event listers have completed. Then the previously blocked events will be emitted.
+            this.changingEvents = [];
+            // Add this observable event first
+            if (observable && observableNotify) {
+                this.changingEvents.push({
+                    observable: observable,
+                    eventName: observableEventName,
+                    eventValue: eventValue,
+                    notify: observableNotify
+                });
+            }
+            var viewStateChangeEvent = {
+                eventName: viewStateEventName,
+                eventValue: eventValue
+            };
+            // Fire an event to indicate that a view-state-change is starting
+            this.observable.notify(viewStateChangeEvent, ViewStateEventNames.viewStateChanging);
+            // Fire a change-start event
+            this.observable.notify(eventValue, viewStateEventName);
+            // Fire the individual callbacks that we previously suppressed
+            for (var _b = 0, _c = this.changingEvents; _b < _c.length; _b++) {
+                var changingEvent = _c[_b];
+                changingEvent.notify(changingEvent.eventValue, changingEvent.eventName);
+            }
+            // Delete the changing events queue. The next change event will start this process.
+            this.changingEvents = null;
+            // Fire an event to indicate that a view-state-change is complete
+            this.observable.notify(viewStateChangeEvent, ViewStateEventNames.viewStateChanged);
+        }
+    };
+    return ViewState;
+}());
+export { ViewState };
+/**
+ * An observable value which is used in a view state
+ */
+var ViewStateObservable = /** @class */ (function (_super) {
+    tslib_1.__extends(ViewStateObservable, _super);
+    /**
+     * Create a new view state observable
+     *
+     * @param notifyViewStateDelegate The view state's notify method
+     * @param viewStateChangeEventName The name of the view state change event
+     */
+    function ViewStateObservable(notifyViewStateDelegate, viewStateChangeEventName, mergeEventsAsObjects, bypassCallback) {
+        var _this = _super.call(this) || this;
+        _this.notifyViewStateDelegate = notifyViewStateDelegate;
+        _this.viewStateEventName = viewStateChangeEventName;
+        _this.mergeEventsAsObjects = mergeEventsAsObjects;
+        return _this;
+    }
+    ViewStateObservable.prototype.notify = function (value, action, persistEvent) {
+        if (this.shouldBypassViewState(value, action, persistEvent)) {
+            _super.prototype.notify.call(this, value, action, persistEvent);
+        }
+        else {
+            this.notifyViewStateDelegate(value, this.viewStateEventName, this, action, _super.prototype.notify.bind(this));
+        }
+    };
+    ViewStateObservable.prototype.shouldBypassViewState = function (value, action, persistEvent) {
+        return false;
+    };
+    ViewStateObservable.prototype.mergeChangeEvents = function (firstEventValue, nextEventValue) {
+        return nextEventValue;
+    };
+    return ViewStateObservable;
+}(Observable));
+export { ViewStateObservable };
+/**
+ * An observable value which is used in a view state
+ */
+var ViewStateObservableValue = /** @class */ (function (_super) {
+    tslib_1.__extends(ViewStateObservableValue, _super);
+    function ViewStateObservableValue(notifyViewStateDelegate, viewStateChangeEventName, value) {
+        var _this = _super.call(this, notifyViewStateDelegate, viewStateChangeEventName) || this;
+        _this.v = value;
+        return _this;
+    }
+    Object.defineProperty(ViewStateObservableValue.prototype, "value", {
+        get: function () {
+            return this.v;
+        },
+        set: function (value) {
+            if (value !== this.v) {
+                this.v = value;
+                this.notify(value, "set");
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
+    return ViewStateObservableValue;
+}(ViewStateObservable));
+export { ViewStateObservableValue };
+/**
+ * Filter used within a view state
+ */
+var ViewStateFilter = /** @class */ (function (_super) {
+    tslib_1.__extends(ViewStateFilter, _super);
+    function ViewStateFilter(notifyViewStateDelegate, viewStateChangeEventName, options) {
+        return _super.call(this, options, new ViewStateFilterObservable(notifyViewStateDelegate, viewStateChangeEventName)) || this;
+    }
+    return ViewStateFilter;
+}(Filter));
+export { ViewStateFilter };
+var ViewStateFilterObservable = /** @class */ (function (_super) {
+    tslib_1.__extends(ViewStateFilterObservable, _super);
+    function ViewStateFilterObservable() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    ViewStateFilterObservable.prototype.shouldBypassViewState = function (value, action, persistEvent) {
+        return action !== FILTER_CHANGE_EVENT;
+    };
+    ViewStateFilterObservable.prototype.mergeChangeEvents = function (firstEventValue, nextEventValue) {
+        return tslib_1.__assign({}, firstEventValue, nextEventValue);
+    };
+    return ViewStateFilterObservable;
+}(ViewStateObservable));
+/**
+ * ViewOptions used within a view state
+ */
+var ViewStateOptions = /** @class */ (function (_super) {
+    tslib_1.__extends(ViewStateOptions, _super);
+    function ViewStateOptions(notifyViewStateDelegate, viewStateChangeEventName, options) {
+        return _super.call(this, options, new ViewStateOptionsObservable(notifyViewStateDelegate, viewStateChangeEventName)) || this;
+    }
+    return ViewStateOptions;
+}(ViewOptions));
+export { ViewStateOptions };
+var ViewStateOptionsObservable = /** @class */ (function (_super) {
+    tslib_1.__extends(ViewStateOptionsObservable, _super);
+    function ViewStateOptionsObservable() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    ViewStateOptionsObservable.prototype.mergeChangeEvents = function (firstEventValue, nextEventValue) {
+        return tslib_1.__assign({}, firstEventValue, nextEventValue);
+    };
+    return ViewStateOptionsObservable;
+}(ViewStateObservable));

VssContextualMenu.js

@@ -1,1 +0,1 @@
-export*from"./Components/VssContextualMenu/index";
+export * from "./Components/VssContextualMenu/index";

VssDetailsList.js

@@ -1,1 +0,1 @@
-export*from"./Components/VssDetailsList/index";
+export * from "./Components/VssDetailsList/index";

VssIcon.js

@@ -1,1 +0,1 @@
-export*from"./Components/VssIcon/index";
+export * from "./Components/VssIcon/index";

VssPersona.js

@@ -1,1 +0,1 @@
-export*from"./Components/VssPersona/index";
+export * from "./Components/VssPersona/index";

ZeroData.js

@@ -1,1 +0,1 @@
-export*from"./Components/ZeroData/index";
+export * from "./Components/ZeroData/index";

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

500807

increased by48.4%

Lines of code

10758

increased by154.03%

No dependency changes