superdesk-ui-framework 3.0.65 → 3.0.67

package/examples/pages/playgrounds/react-playgrounds/UiPlayground.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as Components from './components/Index';
-import { ButtonGroup, Button, NavButton, SubNav, Dropdown, CheckButtonGroup, RadioGroup, RadioButtonGroup, Input, Select, Option, Label, Icon, IconButton, Checkbox, GridList, Badge } from '../../../../app-typescript/index';
+import { ButtonGroup, Button, NavButton, SubNav, Dropdown, RadioButtonGroup, Input, Select, Option, Label, Icon, IconButton, Checkbox, GridList, Badge } from '../../../../app-typescript/index';
 import * as GridElements from '../../../../app-typescript/components/GridItem';
 
 import dummy_items from '../dummy-data/items';
@@ -77,7 +77,9 @@ export class UiPlayground extends React.Component<IProps, IState> {
                         { icon: 'spike', size: 'big' },
                         { icon: 'personal', size: 'big' },
                         { icon: 'global-search', size: 'big' },
-                        { icon: 'picture', size: 'big', active: true }]} />
+                        { icon: 'picture', size: 'big', active: true }
+                    ]}
+                />
 
                 <Components.LayoutContainer>
                     <Components.HeaderPanel>
@@ -93,7 +95,9 @@ export class UiPlayground extends React.Component<IProps, IState> {
                                                 { label: 'File archive', onSelect: () => this.setState({ dropDownState: 'File archive' }) },
                                                 { label: 'AP images', onSelect: () => this.setState({ dropDownState: 'AP archive' }) },
                                             ]
-                                        }]}>
+                                        }
+                                    ]}
+                                >
                                     <NavButton text={this.state.dropDownState ? this.state.dropDownState : 'All Archives'} onClick={() => false} />
                                 </Dropdown>
                             </ButtonGroup>
@@ -107,11 +111,16 @@ export class UiPlayground extends React.Component<IProps, IState> {
                             <ButtonGroup align='inline'>
                                 <NavButton icon='filter-large' onClick={this.handleFilter} />
                             </ButtonGroup>
-                            <RadioButtonGroup options={[
-                                {value:'test10', label:'Radio button with icon'},
-                                {value:'test11', label:'I have an icon!'},
-                                {value:'test12', label:'Yeah, me too!'},
-                            ]} group={{padded:true}} value={this.state.itemType} onChange={(value) => this.setState({ itemType: value })} />
+                            <RadioButtonGroup
+                                options={[
+                                    {value:'test10', label:'Radio button with icon'},
+                                    {value:'test11', label:'I have an icon!'},
+                                    {value:'test12', label:'Yeah, me too!'},
+                                ]}
+                                group={{padded:true}}
+                                value={this.state.itemType}
+                                onChange={(value) => this.setState({ itemType: value })}
+                            />
                             <ButtonGroup align='end' spaces='no-space'>
                                 <Dropdown
                                     items={[
@@ -123,7 +132,8 @@ export class UiPlayground extends React.Component<IProps, IState> {
                                                 { label: 'Accessible Light', icon: 'adjust', onSelect: () => this.handleTheme('accessible-light-ui')},
                                             ]
                                         },
-                                    ]}>
+                                    ]}
+                                >
                                     <NavButton type='default' icon='adjust' onClick={()=> false} />
                                 </Dropdown>
                                 <NavButton icon='th-list' onClick={() => false} />
@@ -145,8 +155,8 @@ export class UiPlayground extends React.Component<IProps, IState> {
                                                 value='Title'
                                                 inlineLabel={false}
                                                 disabled={false}
-                                                invalid={false}
-                                                onChange={(value) => { }} />
+                                                onChange={() => false}
+                                            />
                                         </div>
                                     </div>
                                     <div className="form__group">
@@ -156,8 +166,8 @@ export class UiPlayground extends React.Component<IProps, IState> {
                                                 error='This is error message'
                                                 inlineLabel={false}
                                                 disabled={false}
-                                                invalid={false}
-                                                onChange={(value) => { }}>
+                                                onChange={() => false}
+                                            >
                                                 <Option value="option-1">Select ingest source...</Option>
                                                 <Option value="option-2">Associated Press</Option>
                                                 <Option value="option-3">Reuters</Option>
@@ -173,8 +183,8 @@ export class UiPlayground extends React.Component<IProps, IState> {
                                                 value='Keyword'
                                                 inlineLabel={false}
                                                 disabled={false}
-                                                invalid={false}
-                                                onChange={(value) => { }} />
+                                                onChange={() => false}
+                                            />
                                         </div>
                                     </div>
 
@@ -186,8 +196,8 @@ export class UiPlayground extends React.Component<IProps, IState> {
                                                 info='Dolor in hendrerit.'
                                                 inlineLabel={false}
                                                 disabled={false}
-                                                invalid={false}
-                                                onChange={(value) => { }}>
+                                                onChange={() => false}
+                                            >
                                                 <Option value="">--- Not selected ---</Option>
                                                 <Option value="single">Single usage</Option>
                                                 <Option value="time">Time restricted</Option>
@@ -206,16 +216,19 @@ export class UiPlayground extends React.Component<IProps, IState> {
                     </Components.LeftPanel>
                     {/* FILTER PANEL*/}
 
-                    <Components.MainPanel >
-
+                    <Components.MainPanel>
                         <GridList size="small" gap="medium" margin="3">
-                            {dummy_items.map((item, index) =>
+                            {dummy_items.map((item: any, index: any) =>
                                 <GridElements.GridItem locked={item.locked} status={item.status} onClick={this.handlePreview} itemtype={item.type} key={index}>
                                     <GridElements.GridItemCheckWrapper>
-                                        <Checkbox checked={item.selected} label={{text:''}} onChange={(value) => {
-                                            item.selected = value;
-                                            this.changeStatus(item, 'selected');
-                                        }} />
+                                        <Checkbox
+                                            checked={item.selected}
+                                            label={{text:''}}
+                                            onChange={(value) => {
+                                                item.selected = value;
+                                                this.changeStatus(item, 'selected');
+                                            }}
+                                        />
                                     </GridElements.GridItemCheckWrapper>
                                     <GridElements.GridItemTopActions>
                                         <IconButton icon='fullscreen' ariaValue='More actions' onClick={()=> false} />
@@ -265,7 +278,9 @@ export class UiPlayground extends React.Component<IProps, IState> {
                                                         { label: 'Download', icon: 'download', onSelect: () => this.setState({ dropDownState: 'Download' }) },
                                                         { label: 'Delete', icon: 'trash', onSelect: () => this.setState({ dropDownState: 'Delete' }) },
                                                     ]
-                                                }]}>
+                                                }
+                                            ]}
+                                        >
                                             <IconButton ariaValue='dropdown-more-options' icon='dots-vertical' onClick={() => false} />
                                         </Dropdown>
                                     </div>

package/examples/pages/playgrounds/react-playgrounds/components/GraphicButton.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import {Redirect} from 'react-router-dom';
 
 interface IGraphicButton {
     children?: never;
@@ -10,12 +9,14 @@ interface IGraphicButton {
 }
 
 export class GraphicButton extends React.PureComponent<IGraphicButton> {
-    constructor(props){
+    constructor(props: IGraphicButton){
         super(props);
         this.onSubmit=this.onSubmit.bind(this);
     }
-    onSubmit=() =>{
-        window.location.href = this.props.link;
+    onSubmit=() => {
+        if (this.props.link != null) {
+            window.location.href = this.props.link; 
+        }
     }
     render() {
         return (
@@ -30,4 +31,4 @@ export class GraphicButton extends React.PureComponent<IGraphicButton> {
             </a>
         );
     }
-}
+}

package/examples/pages/playgrounds/react-playgrounds/components/Layout.tsx

@@ -1,6 +1,4 @@
 import * as React from 'react';
-import { SidebarMenu } from './SidebarMenu';
-import { AuthoringContent } from './AuthoringContent';
 
 interface IProps {
     header: string;

package/examples/pages/playgrounds/react-playgrounds/components/SearchBar.tsx

@@ -20,7 +20,7 @@ interface IState {
 
 export class SearchBar extends React.PureComponent<IProps, IState> {
     private inputRef: any;
-    constructor(props) {
+    constructor(props: IProps) {
         super(props);
         this.state = {
             inputValue: this.props.value ? this.props.value : '', 
@@ -46,27 +46,34 @@ export class SearchBar extends React.PureComponent<IProps, IState> {
     }
 
     render() {
-        let classes = classNames('sd-searchbar', {
+        const classes = classNames('sd-searchbar', {
             [`sd-searchbar--${this.state.type}`] : this.props.type,
             'sd-searchbar--expanded': this.state.type === 'expanded' || this.props.type === undefined,
             'sd-searchbar--focused' : this.state.focused,
             'sd-searchbar--boxed': this.state.boxed,
         });
+
         return (
             <div className={classes} ref={this.inputRef}>
                 <label className="sd-searchbar__icon"></label>
-                <input id="search-input"
-                ref={(input: any) => (input && this.props.focused) && input.focus()}
+
+                <input
+                    id="search-input"
+                    ref={(input: any) => (input && this.props.focused) && input.focus()}
                     className="sd-searchbar__input"
                     type="text"
                     placeholder={this.props.placeholder}
                     value={this.state.inputValue}
                     onChange={(e) => this.setState({inputValue: e.target.value})}
-                    onFocus={() => this.setState({focused: true})} />
-                {this.state.inputValue &&
-                <button className="sd-searchbar__cancel" onClick={() => this.setState({inputValue: ''})}>
-                    <Icon name='remove-sign' />
-                </button>}
+                    onFocus={() => this.setState({focused: true})}
+                />
+
+                {this.state.inputValue && (
+                    <button className="sd-searchbar__cancel" onClick={() => this.setState({inputValue: ''})}>
+                        <Icon name='remove-sign' />
+                    </button>
+                )}
+
                 <button id="sd-searchbar__search-btn" className="sd-searchbar__search-btn" onSubmit={() => this.props.onSubmit}>
                     <Icon name='chevron-right-thin' />
                 </button>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "superdesk-ui-framework",
-  "version": "3.0.65",
+  "version": "3.0.67",
   "license": "AGPL-3.0",
   "repository": {
     "type": "git",

package/react/{components → app-typescript/components}/Autocomplete.js

@@ -142,8 +142,8 @@ var Autocomplete = /** @class */ (function (_super) {
                 this.props.label && !this.props.isSearchField ? React.createElement("label", { className: 'sd-input__label', htmlFor: this.htmlId }, this.props.label) : null,
                 this.props.label && this.props.isSearchField ? React.createElement("label", { className: 'sd-searchbar__icon', htmlFor: this.htmlId, "aria-label": this.props.label }) : null,
                 React.createElement(autocomplete_1.AutoComplete, { id: this.htmlId, inputClassName: inputFieldClass, value: this.state.selectedItem, placeholder: this.props.placeholder, suggestions: this.state.filteredItems, completeMethod: this.searchItem, itemTemplate: this.props.listItemTemplate, field: this.props.keyValue, disabled: this.props.disabled, minLength: this.props.minLength ? this.props.minLength : 1, onFocus: function () { _this.setState({ focused: true }); }, onBlur: function () { _this.setState({ focused: false }); }, onChange: function (event) { return _this.handleChange(event); }, onSelect: function (event) { return _this.handleSelect(event); } }),
-                this.props.isSearchField && this.state.selectedItem ?
-                    React.createElement("button", { className: "sd-searchbar__cancel", onClick: function () { return _this.handleInputClear(); } },
+                this.props.isSearchField && this.state.selectedItem
+                    ? React.createElement("button", { className: "sd-searchbar__cancel", onClick: function () { return _this.handleInputClear(); } },
                         React.createElement("i", { className: "icon-remove-sign", "aria-label": "remove-sign" }))
                     : null,
                 !this.props.isSearchField ?

package/react/{components → app-typescript/components}/Badge.js

@@ -62,7 +62,7 @@ var Badge = /** @class */ (function (_super) {
                 React.createElement("span", { className: classes, style: { backgroundColor: this.props.hexColor }, "data-test-id": "badge-content" }, this.props.text)));
         }
         else {
-            return React.createElement("span", { className: classes, style: { backgroundColor: this.props.hexColor }, "data-test-id": this.props['data-test-id'] }, this.props.text);
+            return (React.createElement("span", { className: classes, style: { backgroundColor: this.props.hexColor }, "data-test-id": this.props['data-test-id'] }, this.props.text));
         }
     };
     return Badge;

package/react/{components → app-typescript/components}/Dropdown.js

@@ -174,7 +174,9 @@ var Dropdown = function (_a) {
             (React.isValidElement(children) ?
                 React.createElement("div", { ref: buttonRef, style: { display: 'content' } }, (function () {
                     var attrs = {
-                        className: children.props.className ? (children.props.className + ' dropdown__toggle dropdown-toggle') : 'dropdown__toggle dropdown-toggle',
+                        className: children.props.className
+                            ? (children.props.className + ' dropdown__toggle dropdown-toggle')
+                            : 'dropdown__toggle dropdown-toggle',
                         'aria-haspopup': "menu",
                         'aria-expanded': open,
                         onClick: toggleDisplay,

package/react/{components → app-typescript/components}/DropdownFirst.js

@@ -107,7 +107,9 @@ var DropdownFirst = function (_a) {
     }
     if (headerFooter) {
         return (React.createElement("div", { className: classes },
-            React.createElement("button", { className: navDropdown ? 'dropdown__toggle navbtn dropdown-toggle' : 'dropdown__toggle nav-btn dropdown-toggle', onClick: isOpen }, icon ?
+            React.createElement("button", { className: navDropdown
+                    ? 'dropdown__toggle navbtn dropdown-toggle'
+                    : 'dropdown__toggle nav-btn dropdown-toggle', onClick: isOpen }, icon ?
                 (React.createElement("i", { className: "icon-" + icon })) :
                 (React.createElement(React.Fragment, null,
                     name,
@@ -128,7 +130,9 @@ var DropdownFirst = function (_a) {
         }
         else {
             return (React.createElement("div", { className: classes },
-                React.createElement("button", { className: navDropdown ? 'dropdown__toggle navbtn dropdown-toggle' : 'dropdown__toggle nav-btn dropdown-toggle', onClick: isOpen }, icon ?
+                React.createElement("button", { className: navDropdown
+                        ? 'dropdown__toggle navbtn dropdown-toggle'
+                        : 'dropdown__toggle nav-btn dropdown-toggle', onClick: isOpen }, icon ?
                     (React.createElement("i", { className: "icon-" + icon })) :
                     (React.createElement(React.Fragment, null,
                         name,

package/react/{components → app-typescript/components}/DurationInput.js

@@ -286,7 +286,11 @@ var DurationInput = /** @class */ (function (_super) {
         this.setState(stateClone);
     };
     DurationInput.prototype.handleFocusOnKeyUp = function (event, ref) {
-        if (event.key !== 'ArrowRight' && event.key !== 'ArrowLeft' && event.key !== 'ArrowUp' && event.key !== 'ArrowDown' && event.key !== 'Backspace') {
+        if (event.key !== 'ArrowRight'
+            && event.key !== 'ArrowLeft'
+            && event.key !== 'ArrowUp'
+            && event.key !== 'ArrowDown'
+            && event.key !== 'Backspace') {
             if ((event.keyCode > 46 && event.keyCode < 58) || (event.keyCode > 95 && event.keyCode < 106)) {
                 var target = event.target;
                 if (target.value.length >= 2) {

package/react/{components → app-typescript/components}/EmptyState.js

@@ -57,7 +57,8 @@ var EmptyState = /** @class */ (function (_super) {
             _a["content-state__image--".concat(this.props.size)] = this.props.size || this.props.size !== undefined,
             _a));
         var image = require("../../app/img/empty_states/empty-state--".concat(this.props.size ? this.props.size : 'small', "-").concat(this.props.illustration ? this.props.illustration : '1', ".svg"));
-        return (React.createElement("div", { className: 'content-state--empty-container' + (this.props.absolutePositioned ? ' content-state__empty-container--absolute' : '') },
+        return (React.createElement("div", { className: 'content-state--empty-container'
+                + (this.props.absolutePositioned ? ' content-state__empty-container--absolute' : '') },
             React.createElement("div", { className: 'content-state__empty-info' },
                 React.createElement("figure", { className: classes },
                     React.createElement("img", { src: image, alt: this.props.illustration })),

package/react/{components → app-typescript/components}/Lists/ContentList.js

@@ -83,7 +83,7 @@ var ContentListItem = /** @class */ (function (_super) {
                 ? React.createElement("div", { className: "sd-list-item__border sd-list-item__border--locked" })
                 : React.createElement("div", { className: "sd-list-item__border" }),
             this.props.itemColum.map(function (item, index) {
-                return React.createElement("div", { className: "sd-list-item__column ".concat(item.fullwidth && 'sd-list-item__column--grow', " ").concat(!item.border && 'sd-list-item__column--no-border'), key: index }, item.itemRow.map(function (e, i) {
+                return React.createElement("div", { className: "\n                            sd-list-item__column\n                            ".concat(item.fullwidth && 'sd-list-item__column--grow', "\n                            ").concat(!item.border && 'sd-list-item__column--no-border'), key: index }, item.itemRow.map(function (e, i) {
                     return (item.itemRow.length <= 1
                         ? React.createElement(React.Fragment, { key: i }, e.content)
                         : React.createElement("div", { className: "sd-list-item__row", key: i }, e.content));

package/react/{components → app-typescript/components}/Modal.js

@@ -58,8 +58,8 @@ var Modal = /** @class */ (function (_super) {
             _a["p-dialog-content--".concat(this.props.size)] = this.props.size,
             _a['p-dialog-content-bg--default'] = this.props.contentBg === undefined,
             _a["p-dialog-content-bg--".concat(this.props.contentBg)] = this.props.contentBg,
-            _a['p-dialog-content--s-padding'] = this.props.contentPadding === undefined,
-            _a["p-dialog-content--".concat(this.props.contentPadding)] = this.props.contentPadding,
+            _a['p-dialog-content--padding-small'] = this.props.contentPadding === undefined,
+            _a["p-dialog-content--padding-".concat(this.props.contentPadding)] = this.props.contentPadding,
             _a), this.props.className);
         return (React.createElement("div", { style: { display: 'content' }, "data-theme": this.props.theme !== 'dark' ? null : 'dark-ui' },
             React.createElement(dialog_1.Dialog, { id: this.props.id, visible: this.props.visible, header: this.props.headerTemplate, footer: this.props.footerTemplate, closeOnEscape: this.props.closeOnEscape, maximized: this.props.maximized, maximizable: this.props.maximizable, contentClassName: classes, onShow: this.props.onShow, onHide: (_b = this.props.onHide) !== null && _b !== void 0 ? _b : lodash_1.noop, zIndex: this.props.zIndex ? this.props.zIndex : 1000, position: this.props.position, closable: this.props.onHide != null ? true : false }, this.props.children)));

package/react/{components → app-typescript/components}/Navigation/BottomNav.js

@@ -76,7 +76,10 @@ var BottomNav = /** @class */ (function (_super) {
     BottomNav.prototype.render = function () {
         var _this = this;
         return (React.createElement("ul", { className: 'sd-bottom-nav-list' }, this.props.items.map(function (item, index) {
-            return (React.createElement("li", { key: index, className: 'sd-bottom-nav-list__item' + (item['active'] ? ' sd-bottom-nav-list__item--active' : (index === _this.state.index ? ' sd-bottom-nav-list__item--active' : '')) },
+            return (React.createElement("li", { key: index, className: 'sd-bottom-nav-list__item'
+                    + (item['active']
+                        ? ' sd-bottom-nav-list__item--active'
+                        : (index === _this.state.index ? ' sd-bottom-nav-list__item--active' : '')) },
                 React.createElement("a", { className: 'sd-bottom-nav-list__item-title', onClick: function (event) {
                         _this.handleClick(index);
                         item.onClick(event);

package/react/{components → app-typescript/components}/Navigation/QuickNavBar.js

@@ -111,7 +111,8 @@ var QuickNavBar = /** @class */ (function (_super) {
                 }
                 else {
                     return (React.createElement("li", { key: index, "data-sd-tooltip": item['tooltip'], "data-flow": 'right' },
-                        React.createElement("a", { role: 'button', "aria-label": item['tooltip'], className: 'sd-quickbar__btn' + (index === _this.state.index ? ' sd-quickbar__btn--active' : ''), onClick: function () { return _this.handleClick(item, index, event); } },
+                        React.createElement("a", { role: 'button', "aria-label": item['tooltip'], className: 'sd-quickbar__btn'
+                                + (index === _this.state.index ? ' sd-quickbar__btn--active' : ''), onClick: function () { return _this.handleClick(item, index, event); } },
                             React.createElement(Icon_1.Icon, { size: 'small', name: item['icon'] }))));
                 }
             }))));

package/react/{components → app-typescript/components}/Navigation/SideBarMenu.js

@@ -80,7 +80,9 @@ var SideBarMenu = /** @class */ (function (_super) {
                     return (React.createElement("li", { key: index, "data-sd-tooltip": item['tooltip'], "data-flow": 'right', className: item.hover ? 'authoring-active__item' : '' },
                         React.createElement("a", { className: 'sd-sidebar-menu__btn'
                                 + (_this.state.hover ? ' sd-sidebar-menu__btn--closed ' : '')
-                                + (item['active'] ? ' sd-sidebar-menu__btn--active' : (index === _this.state.index ? ' sd-sidebar-menu__btn--active' : '')), onClick: function () {
+                                + (item['active']
+                                    ? ' sd-sidebar-menu__btn--active'
+                                    : (index === _this.state.index ? ' sd-sidebar-menu__btn--active' : '')), onClick: function () {
                                 _this.handleClick(index);
                                 if (item.hover) {
                                     _this.handleArrows();

package/react/{components → app-typescript/components}/SearchBar.js

@@ -81,6 +81,7 @@ var SearchBar = /** @class */ (function (_super) {
             _a['sd-searchbar--boxed'] = this.state.boxed,
             _a));
         return (React.createElement("div", { className: classes, ref: this.inputRef },
+            this.props.children,
             React.createElement("label", { className: "sd-searchbar__icon" }),
             React.createElement("input", { id: "search-input", ref: function (input) { return (input && _this.props.focused) && input.focus(); }, className: "sd-searchbar__input", type: "text", placeholder: this.props.placeholder, value: this.state.inputValue, onKeyPress: function (event) {
                     if (event.key === 'Enter') {

package/react/{components → app-typescript/components}/TabList.js

@@ -86,7 +86,8 @@ var TabList = /** @class */ (function (_super) {
             _a));
         return (React.createElement(React.Fragment, null,
             React.createElement("div", { className: classes, role: 'tablist' }, this.props.children.map(function (item, index) {
-                return React.createElement("button", { key: index, onClick: function () { return _this.handleChange(index); }, role: 'tab', "aria-selected": _this.state.index === index ? 'true' : 'false', className: 'sd-nav-tabs__tab' + (_this.state.index === index ? ' sd-nav-tabs__tab--active' : '') },
+                return React.createElement("button", { key: index, onClick: function () { return _this.handleChange(index); }, role: 'tab', "aria-selected": _this.state.index === index ? 'true' : 'false', className: 'sd-nav-tabs__tab'
+                        + (_this.state.index === index ? ' sd-nav-tabs__tab--active' : '') },
                     React.createElement("span", null, item.props.label));
             })),
             React.createElement("div", { className: 'sd-nav-tabs__content' +

package/react/{components → app-typescript/components}/TagInput.js

@@ -60,7 +60,7 @@ var TagInput = /** @class */ (function (_super) {
             return (React.createElement(SelectPreview_1.SelectPreview, { kind: { mode: 'multi-select' }, items: this.props.value, getLabel: function (item) { return item; } }));
         }
         return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, invalid: this.props.error != null, required: this.props.required, disabled: this.props.disabled, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, htmlId: this.htmlId, tabindex: this.props.tabindex },
-            React.createElement(chips_1.Chips, { className: "tags-input--multi-select sd-input__input ".concat(this.props.disabled ? ' tags-input__padding-disabled' : ''), allowDuplicate: false, separator: ",", onChange: function (event) { return onChange(event.value); }, value: value, placeholder: this.props.disabled ? undefined : placeholder, disabled: this.props.disabled })));
+            React.createElement(chips_1.Chips, { className: "\n                        tags-input--multi-select sd-input__input\n                        ".concat(this.props.disabled ? ' tags-input__padding-disabled' : ''), allowDuplicate: false, separator: ",", onChange: function (event) { return onChange(event.value); }, value: value, placeholder: this.props.disabled ? undefined : placeholder, disabled: this.props.disabled })));
     };
     return TagInput;
 }(React.Component));

package/react/{components → app-typescript/components}/TreeSelect/TreeSelect.d.ts

@@ -18,7 +18,7 @@ interface IPropsBase<T> extends IInputWrapper {
     value?: Array<T>;
     selectBranchWithChildren?: boolean;
     readOnly?: boolean;
-    popoverWidth?: 'medium' | 'match-input';
+    width?: 'medium' | 'match-input';
     inputWidth?: '100%';
     allowMultiple?: boolean;
     loading?: boolean;
@@ -26,6 +26,7 @@ interface IPropsBase<T> extends IInputWrapper {
     placeholder?: string;
     searchPlaceholder?: string;
     zIndex?: number;
+    'data-test-id'?: string;
     getLabel(item: T): string;
     getId(item: T): string;
     getBackgroundColor?(item: T): string;
@@ -33,7 +34,6 @@ interface IPropsBase<T> extends IInputWrapper {
     optionTemplate?(item: T): React.ComponentType<T> | JSX.Element;
     valueTemplate?(item: T, Wrapper: React.ElementType): React.ComponentType<T> | JSX.Element;
     onChange(e: Array<T>): void;
-    'data-test-id'?: string;
 }
 interface IPropsSync<T> extends IPropsBase<T> {
     kind: 'synchronous';
@@ -65,6 +65,7 @@ export declare class TreeSelect<T> extends React.Component<IProps<T>, IState<T>>
     buttonFocus: () => void;
     onMouseDown: (event: MouseEvent) => void;
     onKeyDown: (e: KeyboardEvent) => void;
+    onPressEsc: (event: KeyboardEvent) => void;
     componentDidMount: () => void;
     componentWillUnmount(): void;
     componentDidUpdate(prevProps: Readonly<IProps<T>>, prevState: Readonly<IState<T>>): void;