superdesk-ui-framework 4.0.77 → 4.0.79

package/app-typescript/components/Button.tsx

@@ -33,6 +33,7 @@ interface IPropsButton {
     disabled?: boolean;
     iconOnly?: boolean;
     noMargin?: boolean;
+    ariaLabel?: string;
     'data-test-id'?: string;
 }
 
@@ -65,7 +66,7 @@ export class Button extends React.PureComponent<IPropsButton> {
                         disabled={this.props.disabled || this.props.isLoading}
                         data-loading={this.props.isLoading}
                         onClick={this.props.disabled ? () => false : (event) => this.props.onClick(event)}
-                        aria-label={this.props.iconOnly ? this.props.text : ''}
+                        aria-label={this.props.ariaLabel ?? (this.props.iconOnly ? this.props.text : undefined)}
                         data-test-id={this.props['data-test-id']}
                         style={this.props.noMargin ? {margin: 0} : undefined}
                     >

package/app-typescript/components/ShowPopup.tsx

@@ -9,6 +9,7 @@ interface IPropsPopupPositioner {
     getReferenceElement(): HTMLElement;
     placement: Placement;
     onClose(): void;
+    shouldCloseOnClick?: (event: MouseEvent) => boolean;
     closeOnHoverEnd?: boolean;
     'data-test-id'?: string;
 }
@@ -35,6 +36,10 @@ export class PopupPositioner extends React.PureComponent<IPropsPopupPositioner>
             return;
         }
 
+        if (this.props.shouldCloseOnClick != null && this.props.shouldCloseOnClick(event) === false) {
+            return;
+        }
+
         if (
             this.props.getReferenceElement().contains(event.target as Node) !== true &&
             this.wrapperEl.contains(event.target as Node) !== true
@@ -191,6 +196,7 @@ export function showPopup(
     Component: React.ComponentType<{closePopup(): void}>,
     closeOnHoverEnd?: boolean,
     onClose?: () => void,
+    shouldCloseOnClick?: (event: MouseEvent) => boolean,
 ): {close: () => void} {
     const el = document.createElement('div');
 
@@ -207,6 +213,7 @@ export function showPopup(
             getReferenceElement={() => referenceElement}
             placement={placement}
             onClose={closeFn}
+            shouldCloseOnClick={shouldCloseOnClick}
             closeOnHoverEnd={closeOnHoverEnd || false}
         >
             <Component closePopup={closeFn} />

package/app-typescript/components/WithPopover.tsx

@@ -8,6 +8,7 @@ export interface IPropsWithPopover {
     component: React.ComponentType<{closePopup(): void}>;
     closeOnHoverEnd?: boolean;
     onClose?: () => void;
+    shouldCloseOnClick?(event: MouseEvent): boolean;
 }
 
 /**
@@ -37,6 +38,7 @@ export class WithPopover extends React.PureComponent<IPropsWithPopover> {
                     this.closePopup = undefined;
                     this.props.onClose?.();
                 },
+                this.props.shouldCloseOnClick,
             ).close;
         }
     }

package/dist/examples.bundle.js

@@ -27468,8 +27468,9 @@ var Button = /** @class */ (function (_super) {
             _a['sd-flex-justify-end'] = this.props.textAlign === 'end',
             _a));
         return (React.createElement(TooltipWrapper, { tooltipText: this.props.tooltip }, function (_a) {
+            var _b;
             var attributes = _a.attributes;
-            return (React.createElement("button", __assign({}, attributes, { id: _this.props.id, className: classes, tabIndex: 0, disabled: _this.props.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'], style: _this.props.noMargin ? { margin: 0 } : undefined }),
+            return (React.createElement("button", __assign({}, attributes, { id: _this.props.id, className: classes, tabIndex: 0, disabled: _this.props.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": (_b = _this.props.ariaLabel) !== null && _b !== void 0 ? _b : (_this.props.iconOnly ? _this.props.text : undefined), "data-test-id": _this.props['data-test-id'], style: _this.props.noMargin ? { margin: 0 } : undefined }),
                 _this.props.isLoading ? React.createElement(Spinner_1.Spinner, { size: "mini" }) : null,
                 _this.props.icon && !_this.props.isLoading ? React.createElement(Icon_1.Icon, { ariaHidden: true, name: _this.props.icon }) : null,
                 _this.props.iconOnly ? null : _this.props.text));
@@ -60158,6 +60159,9 @@ var PopupPositioner = /** @class */ (function (_super) {
         if (this.wrapperEl == null) {
             return;
         }
+        if (this.props.shouldCloseOnClick != null && this.props.shouldCloseOnClick(event) === false) {
+            return;
+        }
         if (this.props.getReferenceElement().contains(event.target) !== true &&
             this.wrapperEl.contains(event.target) !== true) {
             this.props.onClose();
@@ -60281,7 +60285,7 @@ exports.PopupPositioner = PopupPositioner;
 /**
  * The popup will remove itself if click/scroll events are detected outside the popup.
  */
-function showPopup(referenceElement, placement, Component, closeOnHoverEnd, onClose) {
+function showPopup(referenceElement, placement, Component, closeOnHoverEnd, onClose, shouldCloseOnClick) {
     var el = document.createElement('div');
     document.body.appendChild(el);
     var closeFn = function () {
@@ -60289,7 +60293,7 @@ function showPopup(referenceElement, placement, Component, closeOnHoverEnd, onCl
         el.remove();
         onClose === null || onClose === void 0 ? void 0 : onClose();
     };
-    react_dom_1.default.render(React.createElement(PopupPositioner, { getReferenceElement: function () { return referenceElement; }, placement: placement, onClose: closeFn, closeOnHoverEnd: closeOnHoverEnd || false },
+    react_dom_1.default.render(React.createElement(PopupPositioner, { getReferenceElement: function () { return referenceElement; }, placement: placement, onClose: closeFn, shouldCloseOnClick: shouldCloseOnClick, closeOnHoverEnd: closeOnHoverEnd || false },
         React.createElement(Component, { closePopup: closeFn })), el);
     return { close: closeFn };
 }
@@ -70614,7 +70618,7 @@ var WithPopover = /** @class */ (function (_super) {
                 var _a, _b;
                 _this.closePopup = undefined;
                 (_b = (_a = _this.props).onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
-            }).close;
+            }, this.props.shouldCloseOnClick).close;
         }
     };
     WithPopover.prototype.render = function () {
@@ -195159,7 +195163,7 @@ exports.ThreePaneLayoutPattern = ThreePaneLayoutPattern;
 /* 1049 */
 /***/ (function(module, exports) {
 
-module.exports = {"name":"superdesk-ui-framework","version":"4.0.77","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":"tsc -p tsconfig.json --noEmit && webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","playground-lint":"tsc -p examples/pages/playgrounds/react-playgrounds --noEmit","format-code":"npx prettier . --write","lint":"tsc -p tsconfig.json --noEmit && npx prettier . --check && eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}' && npm run playground-lint && npm run unit-test","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/enzyme-adapter-react-16":"^1.0.6","@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","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","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.7","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","moment":"^2.29.3","node-sass":"6.0","prettier":"3.5.3","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","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":"^5.8.3","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":{"@popperjs/core":"^2.4.0","@sourcefabric/common":"0.0.66","@superdesk/primereact":"^5.0.2-13","@superdesk/react-resizable-panels":"0.0.39","chart.js":"^2.9.3","date-fns":"^4.1.0","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-scrollspy":"^3.4.3","tippy.js":"^6.3.7","weekstart":"^2.0.0"},"peerDependencies":{"moment":"*"},"volta":{"node":"14.21.3"}}
+module.exports = {"name":"superdesk-ui-framework","version":"4.0.79","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":"tsc -p tsconfig.json --noEmit && webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","playground-lint":"tsc -p examples/pages/playgrounds/react-playgrounds --noEmit","format-code":"npx prettier . --write","lint":"tsc -p tsconfig.json --noEmit && npx prettier . --check && eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}' && npm run playground-lint && npm run unit-test","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/enzyme-adapter-react-16":"^1.0.6","@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","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","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.7","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","moment":"^2.29.3","node-sass":"6.0","prettier":"3.5.3","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","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":"^5.8.3","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":{"@popperjs/core":"^2.4.0","@sourcefabric/common":"0.0.66","@superdesk/primereact":"^5.0.2-13","@superdesk/react-resizable-panels":"0.0.39","chart.js":"^2.9.3","date-fns":"^4.1.0","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-scrollspy":"^3.4.3","tippy.js":"^6.3.7","weekstart":"^2.0.0"},"peerDependencies":{"moment":"*"},"volta":{"node":"14.21.3"}}
 
 /***/ }),
 /* 1050 */

package/dist/superdesk-ui.bundle.js

@@ -27245,8 +27245,9 @@ var Button = /** @class */ (function (_super) {
             _a['sd-flex-justify-end'] = this.props.textAlign === 'end',
             _a));
         return (React.createElement(TooltipWrapper, { tooltipText: this.props.tooltip }, function (_a) {
+            var _b;
             var attributes = _a.attributes;
-            return (React.createElement("button", __assign({}, attributes, { id: _this.props.id, className: classes, tabIndex: 0, disabled: _this.props.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'], style: _this.props.noMargin ? { margin: 0 } : undefined }),
+            return (React.createElement("button", __assign({}, attributes, { id: _this.props.id, className: classes, tabIndex: 0, disabled: _this.props.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": (_b = _this.props.ariaLabel) !== null && _b !== void 0 ? _b : (_this.props.iconOnly ? _this.props.text : undefined), "data-test-id": _this.props['data-test-id'], style: _this.props.noMargin ? { margin: 0 } : undefined }),
                 _this.props.isLoading ? React.createElement(Spinner_1.Spinner, { size: "mini" }) : null,
                 _this.props.icon && !_this.props.isLoading ? React.createElement(Icon_1.Icon, { ariaHidden: true, name: _this.props.icon }) : null,
                 _this.props.iconOnly ? null : _this.props.text));
@@ -59888,6 +59889,9 @@ var PopupPositioner = /** @class */ (function (_super) {
         if (this.wrapperEl == null) {
             return;
         }
+        if (this.props.shouldCloseOnClick != null && this.props.shouldCloseOnClick(event) === false) {
+            return;
+        }
         if (this.props.getReferenceElement().contains(event.target) !== true &&
             this.wrapperEl.contains(event.target) !== true) {
             this.props.onClose();
@@ -60011,7 +60015,7 @@ exports.PopupPositioner = PopupPositioner;
 /**
  * The popup will remove itself if click/scroll events are detected outside the popup.
  */
-function showPopup(referenceElement, placement, Component, closeOnHoverEnd, onClose) {
+function showPopup(referenceElement, placement, Component, closeOnHoverEnd, onClose, shouldCloseOnClick) {
     var el = document.createElement('div');
     document.body.appendChild(el);
     var closeFn = function () {
@@ -60019,7 +60023,7 @@ function showPopup(referenceElement, placement, Component, closeOnHoverEnd, onCl
         el.remove();
         onClose === null || onClose === void 0 ? void 0 : onClose();
     };
-    react_dom_1.default.render(React.createElement(PopupPositioner, { getReferenceElement: function () { return referenceElement; }, placement: placement, onClose: closeFn, closeOnHoverEnd: closeOnHoverEnd || false },
+    react_dom_1.default.render(React.createElement(PopupPositioner, { getReferenceElement: function () { return referenceElement; }, placement: placement, onClose: closeFn, shouldCloseOnClick: shouldCloseOnClick, closeOnHoverEnd: closeOnHoverEnd || false },
         React.createElement(Component, { closePopup: closeFn })), el);
     return { close: closeFn };
 }
@@ -70344,7 +70348,7 @@ var WithPopover = /** @class */ (function (_super) {
                 var _a, _b;
                 _this.closePopup = undefined;
                 (_b = (_a = _this.props).onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
-            }).close;
+            }, this.props.shouldCloseOnClick).close;
         }
     };
     WithPopover.prototype.render = function () {

package/package.json

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

package/react/components/Button.d.ts

@@ -18,6 +18,7 @@ interface IPropsButton {
     disabled?: boolean;
     iconOnly?: boolean;
     noMargin?: boolean;
+    ariaLabel?: string;
     'data-test-id'?: string;
 }
 export declare class Button extends React.PureComponent<IPropsButton> {

package/react/components/Button.js

@@ -92,8 +92,9 @@ var Button = /** @class */ (function (_super) {
             _a['sd-flex-justify-end'] = this.props.textAlign === 'end',
             _a));
         return (React.createElement(TooltipWrapper, { tooltipText: this.props.tooltip }, function (_a) {
+            var _b;
             var attributes = _a.attributes;
-            return (React.createElement("button", __assign({}, attributes, { id: _this.props.id, className: classes, tabIndex: 0, disabled: _this.props.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'], style: _this.props.noMargin ? { margin: 0 } : undefined }),
+            return (React.createElement("button", __assign({}, attributes, { id: _this.props.id, className: classes, tabIndex: 0, disabled: _this.props.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": (_b = _this.props.ariaLabel) !== null && _b !== void 0 ? _b : (_this.props.iconOnly ? _this.props.text : undefined), "data-test-id": _this.props['data-test-id'], style: _this.props.noMargin ? { margin: 0 } : undefined }),
                 _this.props.isLoading ? React.createElement(Spinner_1.Spinner, { size: "mini" }) : null,
                 _this.props.icon && !_this.props.isLoading ? React.createElement(Icon_1.Icon, { ariaHidden: true, name: _this.props.icon }) : null,
                 _this.props.iconOnly ? null : _this.props.text));

package/react/components/ShowPopup.d.ts

@@ -4,6 +4,7 @@ interface IPropsPopupPositioner {
     getReferenceElement(): HTMLElement;
     placement: Placement;
     onClose(): void;
+    shouldCloseOnClick?: (event: MouseEvent) => boolean;
     closeOnHoverEnd?: boolean;
     'data-test-id'?: string;
 }
@@ -24,7 +25,7 @@ export declare class PopupPositioner extends React.PureComponent<IPropsPopupPosi
  */
 export declare function showPopup(referenceElement: HTMLElement, placement: Placement, Component: React.ComponentType<{
     closePopup(): void;
-}>, closeOnHoverEnd?: boolean, onClose?: () => void): {
+}>, closeOnHoverEnd?: boolean, onClose?: () => void, shouldCloseOnClick?: (event: MouseEvent) => boolean): {
     close: () => void;
 };
 export {};

package/react/components/ShowPopup.js

@@ -76,6 +76,9 @@ var PopupPositioner = /** @class */ (function (_super) {
         if (this.wrapperEl == null) {
             return;
         }
+        if (this.props.shouldCloseOnClick != null && this.props.shouldCloseOnClick(event) === false) {
+            return;
+        }
         if (this.props.getReferenceElement().contains(event.target) !== true &&
             this.wrapperEl.contains(event.target) !== true) {
             this.props.onClose();
@@ -199,7 +202,7 @@ exports.PopupPositioner = PopupPositioner;
 /**
  * The popup will remove itself if click/scroll events are detected outside the popup.
  */
-function showPopup(referenceElement, placement, Component, closeOnHoverEnd, onClose) {
+function showPopup(referenceElement, placement, Component, closeOnHoverEnd, onClose, shouldCloseOnClick) {
     var el = document.createElement('div');
     document.body.appendChild(el);
     var closeFn = function () {
@@ -207,7 +210,7 @@ function showPopup(referenceElement, placement, Component, closeOnHoverEnd, onCl
         el.remove();
         onClose === null || onClose === void 0 ? void 0 : onClose();
     };
-    react_dom_1.default.render(React.createElement(PopupPositioner, { getReferenceElement: function () { return referenceElement; }, placement: placement, onClose: closeFn, closeOnHoverEnd: closeOnHoverEnd || false },
+    react_dom_1.default.render(React.createElement(PopupPositioner, { getReferenceElement: function () { return referenceElement; }, placement: placement, onClose: closeFn, shouldCloseOnClick: shouldCloseOnClick, closeOnHoverEnd: closeOnHoverEnd || false },
         React.createElement(Component, { closePopup: closeFn })), el);
     return { close: closeFn };
 }

package/react/components/WithPopover.d.ts

@@ -8,6 +8,7 @@ export interface IPropsWithPopover {
     }>;
     closeOnHoverEnd?: boolean;
     onClose?: () => void;
+    shouldCloseOnClick?(event: MouseEvent): boolean;
 }
 /**
  * Wraps `PopupPositioner`

package/react/components/WithPopover.js

@@ -73,7 +73,7 @@ var WithPopover = /** @class */ (function (_super) {
                 var _a, _b;
                 _this.closePopup = undefined;
                 (_b = (_a = _this.props).onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
-            }).close;
+            }, this.props.shouldCloseOnClick).close;
         }
     };
     WithPopover.prototype.render = function () {