superdesk-ui-framework 3.0.48 → 3.0.50

package/app-typescript/components/Button.tsx

@@ -3,7 +3,16 @@ import classNames from 'classnames';
 import { Icon } from './Icon';
 import { Spinner } from './Spinner';
 
-interface IButtonBase {
+interface IPropsButton {
+    text: string;
+    onClick(event: React.MouseEvent<HTMLButtonElement, MouseEvent>): void;
+
+    expand?: boolean;
+    style?: 'filled' | 'hollow' | 'text-only'; // defaults to 'filled'
+    shape?: 'square' | 'round'; // defaults to 'square'
+    isLoading?: boolean;
+    loadingLabel?: string;
+    tooltip?: string;
     id?: string;
     theme?: 'light' | 'dark'; // defaults to 'light'
     type?: 'default' | 'primary' | 'success' | 'warning' | 'alert' | 'highlight' | 'sd-green';
@@ -12,19 +21,9 @@ interface IButtonBase {
     icon?: string;
     disabled?: boolean;
     iconOnly?: boolean;
-    onClick(event: React.MouseEvent<HTMLButtonElement, MouseEvent>): void;
     'data-test-id'?: string;
 }
 
-interface IPropsButton extends IButtonBase {
-    text: string;
-    expand?: boolean;
-    style?: 'filled' | 'hollow' | 'text-only'; // defaults to 'filled'
-    shape?: 'square' | 'round'; // defaults to 'square'
-    isLoading?: boolean;
-    loadingLabel?: string;
-}
-
 export class Button extends React.PureComponent<IPropsButton> {
     render() {
         let classes = classNames('btn', {
@@ -47,7 +46,9 @@ export class Button extends React.PureComponent<IPropsButton> {
                 data-loading={this.props.isLoading}
                 onClick={this.props.disabled ? () => false : (event) => this.props.onClick(event)}
                 aria-label={this.props.iconOnly ? this.props.text : ''}
-                data-test-id={this.props['data-test-id']}>
+                data-test-id={this.props['data-test-id']}
+                title={this.props.tooltip}
+            >
                 {this.props.isLoading ? <Spinner size="mini" /> : null}
                 {this.props.icon && !this.props.isLoading ? <Icon name={this.props.icon} /> : null}
                 {this.props.iconOnly ? null : this.props.text}

package/app-typescript/components/TreeSelect/TreeSelect.tsx

@@ -176,7 +176,9 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
         if (!isEqual(prevState.value, this.state.value)) {
             this.props.onChange(this.state.value);
         } else if (!isEqual(prevProps.value, this.props.value)) {
-            this.props.onChange(this.state.value);
+            this.setState({
+                value: this.props.value ?? [],
+            });
         }
 
         if (prevState.openDropdown !== this.state.openDropdown) {

package/dist/examples.bundle.js

@@ -38403,7 +38403,7 @@ var Button = /** @class */ (function (_super) {
             _a['btn--ui-dark'] = this.props.theme === 'dark',
             _a['btn--icon-only-circle'] = this.props.shape === 'round' && this.props.iconOnly,
             _a));
-        return (React.createElement("button", { id: this.props.id, className: classes, tabIndex: 0, disabled: this.props.isLoading, "data-loading": this.props.isLoading, onClick: this.props.disabled ? function () { return false; } : function (event) { return _this.props.onClick(event); }, "aria-label": this.props.iconOnly ? this.props.text : '', "data-test-id": this.props['data-test-id'] },
+        return (React.createElement("button", { id: this.props.id, className: classes, tabIndex: 0, disabled: this.props.isLoading, "data-loading": this.props.isLoading, onClick: this.props.disabled ? function () { return false; } : function (event) { return _this.props.onClick(event); }, "aria-label": this.props.iconOnly ? this.props.text : '', "data-test-id": this.props['data-test-id'], title: this.props.tooltip },
             this.props.isLoading ? React.createElement(Spinner_1.Spinner, { size: "mini" }) : null,
             this.props.icon && !this.props.isLoading ? React.createElement(Icon_1.Icon, { name: this.props.icon }) : null,
             this.props.iconOnly ? null : this.props.text));
@@ -64551,12 +64551,14 @@ var TreeSelect = /** @class */ (function (_super) {
         document.removeEventListener("keydown", this.onKeyDown);
     };
     TreeSelect.prototype.componentDidUpdate = function (prevProps, prevState) {
-        var _a;
+        var _a, _b;
         if (!(0, lodash_1.isEqual)(prevState.value, this.state.value)) {
             this.props.onChange(this.state.value);
         }
         else if (!(0, lodash_1.isEqual)(prevProps.value, this.props.value)) {
-            this.props.onChange(this.state.value);
+            this.setState({
+                value: (_a = this.props.value) !== null && _a !== void 0 ? _a : [],
+            });
         }
         if (prevState.openDropdown !== this.state.openDropdown) {
             this.toggleMenu();
@@ -64565,7 +64567,7 @@ var TreeSelect = /** @class */ (function (_super) {
             if ((prevState.activeTree !== this.state.activeTree)
                 || (prevState.filterArr !== this.state.filterArr)
                 || (prevState.options !== this.state.options)) {
-                (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.update();
+                (_b = this.popperInstance) === null || _b === void 0 ? void 0 : _b.update();
             }
         }
     };
@@ -143421,7 +143423,7 @@ exports.ResizablePanelsDoc = ResizablePanelsDoc;
 /* 689 */
 /***/ (function(module, exports) {
 
-module.exports = {"name":"superdesk-ui-framework","version":"3.0.48","license":"AGPL-3.0","repository":{"type":"git","url":"https://github.com/superdesk/superdesk-ui-framework.git"},"main":"dist/superdesk-ui.bundle.js","types":"react/index.d.ts","contributors":["Nemanja Pavlovic","Vladimir Stefanovic","Darko Tomic","Aleksandar Jelicic","Tomas Kikutis","Dragana Zivkovic"],"scripts":{"start":"webpack-dev-server --config tasks/webpack.dev.js","server":"webpack --watch --config tasks/webpack.prod.js && tsc-watch","build":"webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}'","lint-fix":"tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build","unit-test":"mocha","debug-unit-tests":"mocha --inspect-brk"},"devDependencies":{"@types/assert":"^1.5.6","@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/enzyme":"^3.10.12","@types/lodash":"^4.14.161","@types/mocha":"^9.1.1","@types/react":"16.8.23","@types/react-beautiful-dnd":"^13.1.2","@types/react-dom":"16.8.0","@types/react-router-dom":"^5.1.2","@types/react-scrollspy":"^3.3.5","@typescript-eslint/parser":"^5.58.0","angular":"^1.7.9","angular-animate":"^1.7.9","angular-route":"^1.7.9","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","classnames":"^2.2.5","clean-webpack-plugin":"^1.0.0","code-prettify":"^0.1.0","copy-webpack-plugin":"^4.6.0","css-loader":"^2.1.1","eslint":"^4.6.1","eslint-loader":"^1.9.0","eslint-plugin-angular":"^3.1.1","eslint-plugin-react":"^7.3.0","extract-text-webpack-plugin":"^3.0.2","file-loader":"^0.11.2","html-loader":"^0.5.1","html-webpack-plugin":"^2.30.1","jquery":"^3.1.1","jquery-ui":"^1.12.1","jsdom":"20.0.3","jsdom-global":"3.0.2","lodash":"4.17.21","mocha":"^8.4.0","node-sass":"6.0","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","react-bootstrap":"^0.31.2","react-dom":"16.8.6","react-redux":"^5.0.6","react-router-dom":"^5.1.2","redux":"^3.7.2","redux-form":"^7.0.4","sass-loader":"^6.0.6","style-loader":"^0.18.2","superdesk-code-style":"^1.1.2","ts-loader":"^6.0.2","ts-node":"^10.9.1","tslint":"^5.18.0","typescript":"4.9.5","url-loader":"^1.1.2","webpack":"^3.5.5","webpack-cli":"3.3.10","webpack-dev-server":"2.11.1","webpack-merge":"^4.2.1"},"dependencies":{"@material-ui/lab":"^4.0.0-alpha.56","@popperjs/core":"^2.4.0","@superdesk/primereact":"^5.0.2-12","@superdesk/react-resizable-panels":"0.0.39","@types/enzyme-adapter-react-16":"^1.0.6","@types/node":"^14.10.2","chart.js":"^2.9.3","date-fns":"2.7.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.7","moment":"^2.29.3","popper-max-size-modifier":"^0.2.0","popper.js":"1.14.4","primeicons":"2.0.0","react-beautiful-dnd":"^13.0.0","react-id-generator":"^3.0.0","react-popper":"^2.2.3","react-scrollspy":"^3.4.3"}}
+module.exports = {"name":"superdesk-ui-framework","version":"3.0.50","license":"AGPL-3.0","repository":{"type":"git","url":"https://github.com/superdesk/superdesk-ui-framework.git"},"main":"dist/superdesk-ui.bundle.js","types":"react/index.d.ts","contributors":["Nemanja Pavlovic","Vladimir Stefanovic","Darko Tomic","Aleksandar Jelicic","Tomas Kikutis","Dragana Zivkovic"],"scripts":{"start":"webpack-dev-server --config tasks/webpack.dev.js","server":"webpack --watch --config tasks/webpack.prod.js && tsc-watch","build":"webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}'","lint-fix":"tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build","unit-test":"mocha","debug-unit-tests":"mocha --inspect-brk"},"devDependencies":{"@types/assert":"^1.5.6","@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/enzyme":"^3.10.12","@types/lodash":"^4.14.161","@types/mocha":"^9.1.1","@types/react":"16.8.23","@types/react-beautiful-dnd":"^13.1.2","@types/react-dom":"16.8.0","@types/react-router-dom":"^5.1.2","@types/react-scrollspy":"^3.3.5","@typescript-eslint/parser":"^5.58.0","angular":"^1.7.9","angular-animate":"^1.7.9","angular-route":"^1.7.9","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","classnames":"^2.2.5","clean-webpack-plugin":"^1.0.0","code-prettify":"^0.1.0","copy-webpack-plugin":"^4.6.0","css-loader":"^2.1.1","eslint":"^4.6.1","eslint-loader":"^1.9.0","eslint-plugin-angular":"^3.1.1","eslint-plugin-react":"^7.3.0","extract-text-webpack-plugin":"^3.0.2","file-loader":"^0.11.2","html-loader":"^0.5.1","html-webpack-plugin":"^2.30.1","jquery":"^3.1.1","jquery-ui":"^1.12.1","jsdom":"20.0.3","jsdom-global":"3.0.2","lodash":"4.17.21","mocha":"^8.4.0","node-sass":"6.0","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","react-bootstrap":"^0.31.2","react-dom":"16.8.6","react-redux":"^5.0.6","react-router-dom":"^5.1.2","redux":"^3.7.2","redux-form":"^7.0.4","sass-loader":"^6.0.6","style-loader":"^0.18.2","superdesk-code-style":"^1.1.2","ts-loader":"^6.0.2","ts-node":"^10.9.1","tslint":"^5.18.0","typescript":"4.9.5","url-loader":"^1.1.2","webpack":"^3.5.5","webpack-cli":"3.3.10","webpack-dev-server":"2.11.1","webpack-merge":"^4.2.1"},"dependencies":{"@material-ui/lab":"^4.0.0-alpha.56","@popperjs/core":"^2.4.0","@superdesk/primereact":"^5.0.2-12","@superdesk/react-resizable-panels":"0.0.39","@types/enzyme-adapter-react-16":"^1.0.6","@types/node":"^14.10.2","chart.js":"^2.9.3","date-fns":"2.7.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.7","moment":"^2.29.3","popper-max-size-modifier":"^0.2.0","popper.js":"1.14.4","primeicons":"2.0.0","react-beautiful-dnd":"^13.0.0","react-id-generator":"^3.0.0","react-popper":"^2.2.3","react-scrollspy":"^3.4.3"}}
 
 /***/ }),
 /* 690 */

package/dist/superdesk-ui.bundle.js

@@ -38047,7 +38047,7 @@ var Button = /** @class */ (function (_super) {
             _a['btn--ui-dark'] = this.props.theme === 'dark',
             _a['btn--icon-only-circle'] = this.props.shape === 'round' && this.props.iconOnly,
             _a));
-        return (React.createElement("button", { id: this.props.id, className: classes, tabIndex: 0, disabled: this.props.isLoading, "data-loading": this.props.isLoading, onClick: this.props.disabled ? function () { return false; } : function (event) { return _this.props.onClick(event); }, "aria-label": this.props.iconOnly ? this.props.text : '', "data-test-id": this.props['data-test-id'] },
+        return (React.createElement("button", { id: this.props.id, className: classes, tabIndex: 0, disabled: this.props.isLoading, "data-loading": this.props.isLoading, onClick: this.props.disabled ? function () { return false; } : function (event) { return _this.props.onClick(event); }, "aria-label": this.props.iconOnly ? this.props.text : '', "data-test-id": this.props['data-test-id'], title: this.props.tooltip },
             this.props.isLoading ? React.createElement(Spinner_1.Spinner, { size: "mini" }) : null,
             this.props.icon && !this.props.isLoading ? React.createElement(Icon_1.Icon, { name: this.props.icon }) : null,
             this.props.iconOnly ? null : this.props.text));
@@ -64168,12 +64168,14 @@ var TreeSelect = /** @class */ (function (_super) {
         document.removeEventListener("keydown", this.onKeyDown);
     };
     TreeSelect.prototype.componentDidUpdate = function (prevProps, prevState) {
-        var _a;
+        var _a, _b;
         if (!(0, lodash_1.isEqual)(prevState.value, this.state.value)) {
             this.props.onChange(this.state.value);
         }
         else if (!(0, lodash_1.isEqual)(prevProps.value, this.props.value)) {
-            this.props.onChange(this.state.value);
+            this.setState({
+                value: (_a = this.props.value) !== null && _a !== void 0 ? _a : [],
+            });
         }
         if (prevState.openDropdown !== this.state.openDropdown) {
             this.toggleMenu();
@@ -64182,7 +64184,7 @@ var TreeSelect = /** @class */ (function (_super) {
             if ((prevState.activeTree !== this.state.activeTree)
                 || (prevState.filterArr !== this.state.filterArr)
                 || (prevState.options !== this.state.options)) {
-                (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.update();
+                (_b = this.popperInstance) === null || _b === void 0 ? void 0 : _b.update();
             }
         }
     };

package/package.json

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

package/react/components/Button.d.ts

@@ -1,5 +1,13 @@
 import * as React from 'react';
-interface IButtonBase {
+interface IPropsButton {
+    text: string;
+    onClick(event: React.MouseEvent<HTMLButtonElement, MouseEvent>): void;
+    expand?: boolean;
+    style?: 'filled' | 'hollow' | 'text-only';
+    shape?: 'square' | 'round';
+    isLoading?: boolean;
+    loadingLabel?: string;
+    tooltip?: string;
     id?: string;
     theme?: 'light' | 'dark';
     type?: 'default' | 'primary' | 'success' | 'warning' | 'alert' | 'highlight' | 'sd-green';
@@ -8,17 +16,8 @@ interface IButtonBase {
     icon?: string;
     disabled?: boolean;
     iconOnly?: boolean;
-    onClick(event: React.MouseEvent<HTMLButtonElement, MouseEvent>): void;
     'data-test-id'?: string;
 }
-interface IPropsButton extends IButtonBase {
-    text: string;
-    expand?: boolean;
-    style?: 'filled' | 'hollow' | 'text-only';
-    shape?: 'square' | 'round';
-    isLoading?: boolean;
-    loadingLabel?: string;
-}
 export declare class Button extends React.PureComponent<IPropsButton> {
     render(): JSX.Element;
 }

package/react/components/Button.js

@@ -65,7 +65,7 @@ var Button = /** @class */ (function (_super) {
             _a['btn--ui-dark'] = this.props.theme === 'dark',
             _a['btn--icon-only-circle'] = this.props.shape === 'round' && this.props.iconOnly,
             _a));
-        return (React.createElement("button", { id: this.props.id, className: classes, tabIndex: 0, disabled: this.props.isLoading, "data-loading": this.props.isLoading, onClick: this.props.disabled ? function () { return false; } : function (event) { return _this.props.onClick(event); }, "aria-label": this.props.iconOnly ? this.props.text : '', "data-test-id": this.props['data-test-id'] },
+        return (React.createElement("button", { id: this.props.id, className: classes, tabIndex: 0, disabled: this.props.isLoading, "data-loading": this.props.isLoading, onClick: this.props.disabled ? function () { return false; } : function (event) { return _this.props.onClick(event); }, "aria-label": this.props.iconOnly ? this.props.text : '', "data-test-id": this.props['data-test-id'], title: this.props.tooltip },
             this.props.isLoading ? React.createElement(Spinner_1.Spinner, { size: "mini" }) : null,
             this.props.icon && !this.props.isLoading ? React.createElement(Icon_1.Icon, { name: this.props.icon }) : null,
             this.props.iconOnly ? null : this.props.text));

package/react/components/TreeSelect/TreeSelect.js

@@ -146,12 +146,14 @@ var TreeSelect = /** @class */ (function (_super) {
         document.removeEventListener("keydown", this.onKeyDown);
     };
     TreeSelect.prototype.componentDidUpdate = function (prevProps, prevState) {
-        var _a;
+        var _a, _b;
         if (!(0, lodash_1.isEqual)(prevState.value, this.state.value)) {
             this.props.onChange(this.state.value);
         }
         else if (!(0, lodash_1.isEqual)(prevProps.value, this.props.value)) {
-            this.props.onChange(this.state.value);
+            this.setState({
+                value: (_a = this.props.value) !== null && _a !== void 0 ? _a : [],
+            });
         }
         if (prevState.openDropdown !== this.state.openDropdown) {
             this.toggleMenu();
@@ -160,7 +162,7 @@ var TreeSelect = /** @class */ (function (_super) {
             if ((prevState.activeTree !== this.state.activeTree)
                 || (prevState.filterArr !== this.state.filterArr)
                 || (prevState.options !== this.state.options)) {
-                (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.update();
+                (_b = this.popperInstance) === null || _b === void 0 ? void 0 : _b.update();
             }
         }
     };