superdesk-ui-framework 3.1.29 → 4.0.1

package/react/components/Layouts/AuthoringMain.d.ts

@@ -11,6 +11,7 @@ interface IProps {
     authoringHeader?: React.ReactNode;
     authoringBookmarks?: React.ReactNode;
     headerCollapsed?: boolean;
+    hideCollapseButton?: boolean;
     headerPadding?: HeaderPadding;
     toolbarCustom?: boolean;
     noPaddingForContent?: boolean;

package/react/components/Layouts/AuthoringMain.js

@@ -50,7 +50,7 @@ var AuthoringMain = /** @class */ (function (_super) {
         return (React.createElement(_1.AuthoringMainContainer, null,
             this.props.toolBar && (React.createElement(_1.AuthoringMainToolBar, { toolbarCustom: this.props.toolbarCustom }, this.props.toolBar)),
             React.createElement(_1.AuthoringMainContent, null,
-                this.props.authoringHeader && (React.createElement(_1.AuthoringInnerHeader, { headerPadding: this.props.headerPadding, collapsed: this.props.headerCollapsed }, this.props.authoringHeader)),
+                this.props.authoringHeader && (React.createElement(_1.AuthoringInnerHeader, { hideCollapseButton: this.props.hideCollapseButton, headerPadding: this.props.headerPadding, collapsed: this.props.headerCollapsed }, this.props.authoringHeader)),
                 this.props.authoringBookmarks && (React.createElement(_1.AuthorinInnerSideBar, null, this.props.authoringBookmarks)),
                 React.createElement(_1.AuthoringInnerBody, { noPadding: this.props.noPaddingForContent }, this.props.children))));
     };

package/react/components/Layouts/Panel.d.ts

@@ -15,7 +15,6 @@ export default class Panel extends React.PureComponent<IPropsPanel> {
 }
 interface IPropsPanelHeader {
     color?: 'light' | 'darker' | 'blueGrey' | 'blueGreyDarker';
-    zIndex?: number;
     title?: string;
     theme?: 'light-ui' | 'dark-ui';
     className?: string;
@@ -23,6 +22,7 @@ interface IPropsPanelHeader {
     iconButtons?: Array<React.ReactNode>;
 }
 declare class PanelHeader extends React.PureComponent<IPropsPanelHeader> {
+    private zIndex;
     constructor(props: IPropsPanelHeader);
     render(): JSX.Element;
 }

package/react/components/Layouts/Panel.js

@@ -47,6 +47,7 @@ var IconButton_1 = require("../IconButton");
 var Spinner_1 = require("../Spinner");
 var classnames_1 = __importDefault(require("classnames"));
 var ButtonGroup_1 = require("../ButtonGroup");
+var zIndex_1 = require("../../zIndex");
 var Panel = /** @class */ (function (_super) {
     __extends(Panel, _super);
     function Panel() {
@@ -80,7 +81,9 @@ exports.default = Panel;
 var PanelHeader = /** @class */ (function (_super) {
     __extends(PanelHeader, _super);
     function PanelHeader(props) {
-        return _super.call(this, props) || this;
+        var _this = _super.call(this, props) || this;
+        _this.zIndex = (0, zIndex_1.getNextZIndex)();
+        return _this;
     }
     PanelHeader.prototype.render = function () {
         var _a;
@@ -90,7 +93,7 @@ var PanelHeader = /** @class */ (function (_super) {
             _a['side-panel__header--has-close'] = this.props.onClose,
             _a), this.props.className);
         var style = {
-            zIndex: this.props.zIndex ? this.props.zIndex : 10,
+            zIndex: this.zIndex,
         };
         var defaultTheme = darkColors.includes(this.props.color || '') ? 'dark-ui' : null;
         return (React.createElement("div", { "data-theme": this.props.theme || defaultTheme, className: classes, style: style },

package/react/components/Menu.d.ts

@@ -46,11 +46,11 @@ interface IMenuBranch {
 interface IProps {
     items: Array<IMenuItem>;
     children: (toggle: (event: SyntheticEvent) => void) => JSX.Element;
-    zIndex?: number;
 }
 export declare class Menu extends React.Component<IProps, {}> {
     private menu;
     private focusedBefore;
+    private zIndex;
     constructor(props: IProps);
     private toPrimeReactInterface;
     private toggle;

package/react/components/Menu.js

@@ -42,7 +42,7 @@ exports.Menu = void 0;
 var React = __importStar(require("react"));
 var tieredmenu_1 = require("@superdesk/primereact/tieredmenu");
 var helpers_1 = require("../helpers");
-var superdeskTopBarZIndex = 1050;
+var zIndex_1 = require("../zIndex");
 function isSeparator(item) {
     return item['separator'] === true;
 }
@@ -56,6 +56,7 @@ var Menu = /** @class */ (function (_super) {
     __extends(Menu, _super);
     function Menu(props) {
         var _this = _super.call(this, props) || this;
+        _this.zIndex = (0, zIndex_1.getNextZIndex)();
         _this.menu = null;
         _this.focusedBefore = null;
         _this.close = _this.close.bind(_this);
@@ -107,7 +108,6 @@ var Menu = /** @class */ (function (_super) {
     };
     Menu.prototype.render = function () {
         var _this = this;
-        var _a;
         return (React.createElement(React.Fragment, null,
             this.props.children(this.toggle),
             React.createElement("div", { onKeyDown: function (event) {
@@ -125,7 +125,7 @@ var Menu = /** @class */ (function (_super) {
                         if (firstMenuItem instanceof HTMLElement) {
                             firstMenuItem.focus();
                         }
-                    }, "data-test-id": "menu", zIndex: (_a = this.props.zIndex) !== null && _a !== void 0 ? _a : superdeskTopBarZIndex }))));
+                    }, "data-test-id": "menu", zIndex: this.zIndex }))));
     };
     return Menu;
 }(React.Component));

package/react/components/Modal.d.ts

@@ -4,7 +4,6 @@ interface IProps {
     className?: string;
     theme?: string;
     visible?: boolean;
-    zIndex?: number;
     closeOnEscape?: boolean;
     contentBg?: 'default' | 'medium' | 'dark';
     contentPadding?: 'none' | 'small' | 'medium' | 'large';
@@ -19,6 +18,7 @@ interface IProps {
     onHide?(): void;
 }
 export declare class Modal extends React.Component<IProps, {}> {
+    private zIndex;
     render(): JSX.Element;
 }
 export {};

package/react/components/Modal.js

@@ -46,10 +46,13 @@ var React = __importStar(require("react"));
 var dialog_1 = require("@superdesk/primereact/dialog");
 var classnames_1 = __importDefault(require("classnames"));
 var lodash_1 = require("lodash");
+var zIndex_1 = require("./../zIndex");
 var Modal = /** @class */ (function (_super) {
     __extends(Modal, _super);
     function Modal() {
-        return _super !== null && _super.apply(this, arguments) || this;
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.zIndex = (0, zIndex_1.getNextZIndex)();
+        return _this;
     }
     Modal.prototype.render = function () {
         var _a;
@@ -62,7 +65,7 @@ var Modal = /** @class */ (function (_super) {
             _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', "data-test-id": this.props['data-test-id'] },
-            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)));
+            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.zIndex, position: this.props.position, closable: this.props.onHide != null ? true : false }, this.props.children)));
     };
     return Modal;
 }(React.Component));

package/react/components/MultiSelect.d.ts

@@ -13,7 +13,6 @@ interface IProps<T> extends IInputWrapper {
     filter?: boolean;
     showClear?: boolean;
     showSelectAll?: boolean;
-    zIndex?: number;
     optionLabel: (option: T) => string;
     itemTemplate?(item: T): JSX.Element | undefined;
     selectedItemTemplate?(value: T): JSX.Element | undefined;
@@ -26,6 +25,7 @@ interface IState<T> {
 }
 export declare class MultiSelect<T> extends React.Component<IProps<T>, IState<T>> {
     private htmlId;
+    private zIndex;
     constructor(props: IProps<T>);
     render(): JSX.Element;
 }

package/react/components/MultiSelect.js

@@ -48,11 +48,13 @@ var classnames_1 = __importDefault(require("classnames"));
 var react_id_generator_1 = __importDefault(require("react-id-generator"));
 var Form_1 = require("./Form");
 var SelectPreview_1 = require("./SelectPreview");
+var zIndex_1 = require("../zIndex");
 var MultiSelect = /** @class */ (function (_super) {
     __extends(MultiSelect, _super);
     function MultiSelect(props) {
         var _this = _super.call(this, props) || this;
         _this.htmlId = (0, react_id_generator_1.default)();
+        _this.zIndex = (0, zIndex_1.getNextZIndex)();
         _this.state = {
             value: _this.props.value != null ? _this.props.value : [],
             options: [],
@@ -74,7 +76,7 @@ var MultiSelect = /** @class */ (function (_super) {
             React.createElement(multiselect_1.MultiSelect, { panelClassName: classes, value: this.props.value, options: this.props.options, onChange: function (_a) {
                     var value = _a.value;
                     return _this.props.onChange(value);
-                }, display: "chip", zIndex: this.props.zIndex, filter: this.props.filter, appendTo: document.body, placeholder: this.props.placeholder, optionLabel: function (option) { return _this.props.optionLabel(option); }, emptyFilterMessage: this.props.emptyFilterMessage, filterPlaceholder: this.props.filterPlaceholder, itemTemplate: this.props.itemTemplate, selectedItemTemplate: this.props.selectedItemTemplate, maxSelectedLabels: (_a = this.props.maxSelectedLabels) !== null && _a !== void 0 ? _a : 4, selectedItemsLabel: this.props.selectedItemsLabel, ariaLabelledBy: this.htmlId + 'label', tabIndex: this.props.tabIndex ? this.props.tabIndex : '0', showClear: this.props.showClear, disabled: this.props.disabled, inputId: this.htmlId })));
+                }, display: "chip", zIndex: this.zIndex, filter: this.props.filter, appendTo: document.body, placeholder: this.props.placeholder, optionLabel: function (option) { return _this.props.optionLabel(option); }, emptyFilterMessage: this.props.emptyFilterMessage, filterPlaceholder: this.props.filterPlaceholder, itemTemplate: this.props.itemTemplate, selectedItemTemplate: this.props.selectedItemTemplate, maxSelectedLabels: (_a = this.props.maxSelectedLabels) !== null && _a !== void 0 ? _a : 4, selectedItemsLabel: this.props.selectedItemsLabel, ariaLabelledBy: this.htmlId + 'label', tabIndex: this.props.tabIndex ? this.props.tabIndex : '0', showClear: this.props.showClear, disabled: this.props.disabled, inputId: this.htmlId })));
     };
     return MultiSelect;
 }(React.Component));

package/react/components/Popover.d.ts

@@ -5,7 +5,6 @@ interface IProps {
     triggerSelector: string;
     displayCloseButton?: boolean;
     placement?: PopperOptions['placement'];
-    zIndex?: number;
 }
 export declare class Popover extends React.Component<IProps> {
     render(): JSX.Element;

package/react/components/Popover.js

@@ -49,7 +49,7 @@ var Popover = /** @class */ (function (_super) {
     Popover.prototype.render = function () {
         var _this = this;
         var _a, _b;
-        return (React.createElement(_Positioner_1.Positioner, { triggerSelector: this.props.triggerSelector, placement: (_a = this.props.placement) !== null && _a !== void 0 ? _a : 'auto', className: "sd-popover", zIndex: this.props.zIndex },
+        return (React.createElement(_Positioner_1.Positioner, { triggerSelector: this.props.triggerSelector, placement: (_a = this.props.placement) !== null && _a !== void 0 ? _a : 'auto', className: "sd-popover" },
             React.createElement("div", { className: "sd-popover__header" },
                 React.createElement("h4", { className: "sd-popover__title", tabIndex: 0, id: 'popoverTitle' }, this.props.title),
                 ((_b = this.props.displayCloseButton) !== null && _b !== void 0 ? _b : true) && (React.createElement("button", { className: "icn-btn icn-btn--small sd-popover__close", tabIndex: 0, "aria-label": 'Close dialog', onClick: function () {

package/react/components/SelectWithTemplate.d.ts

@@ -26,6 +26,9 @@ interface IState<T> {
     loading: boolean;
     invalid: boolean;
 }
+/**
+ * @deprecated use MultiSelect or TreeSelect
+ */
 export declare class SelectWithTemplate<T> extends React.Component<IProps<T>, IState<T>> {
     componentRef: Dropdown | null;
     private htmlId;

package/react/components/SelectWithTemplate.js

@@ -47,6 +47,9 @@ var dropdown_1 = require("@superdesk/primereact/dropdown");
 var react_id_generator_1 = __importDefault(require("react-id-generator"));
 var Form_1 = require("./Form");
 var labelKey = 'label';
+/**
+ * @deprecated use MultiSelect or TreeSelect
+ */
 var SelectWithTemplate = /** @class */ (function (_super) {
     __extends(SelectWithTemplate, _super);
     function SelectWithTemplate(props) {

package/react/components/ShowPopup.d.ts

@@ -1,10 +1,29 @@
 import * as React from 'react';
 import { Placement } from '@popperjs/core';
+interface IPropsPopupPositioner {
+    referenceElement: HTMLElement;
+    placement: Placement;
+    onClose(): void;
+    closeOnHoverEnd?: boolean;
+}
+export declare class PopupPositioner extends React.PureComponent<IPropsPopupPositioner> {
+    private wrapperEl;
+    private popper;
+    private zIndex;
+    constructor(props: IPropsPopupPositioner);
+    closeOnClick(event: MouseEvent): void;
+    closeOnScroll(event: Event): void;
+    closeOnMouseLeave(event: MouseEvent): void;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    render(): JSX.Element;
+}
 /**
  * The popup will remove itself if click/scroll events are detected outside the popup.
  */
 export declare function showPopup(referenceElement: HTMLElement, placement: Placement, Component: React.ComponentType<{
     closePopup(): void;
-}>, zIndex?: number, closeOnHoverEnd?: boolean, onClose?: () => void): {
+}>, closeOnHoverEnd?: boolean, onClose?: () => void): {
     close: () => void;
 };
+export {};

package/react/components/ShowPopup.js

@@ -41,16 +41,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.showPopup = void 0;
+exports.showPopup = exports.PopupPositioner = void 0;
 var React = __importStar(require("react"));
 var react_dom_1 = __importDefault(require("react-dom"));
 var core_1 = require("@popperjs/core");
 var lodash_1 = require("lodash");
 var popper_max_size_modifier_1 = __importDefault(require("popper-max-size-modifier"));
+var zIndex_1 = require("../zIndex");
 var PopupPositioner = /** @class */ (function (_super) {
     __extends(PopupPositioner, _super);
     function PopupPositioner(props) {
         var _this = _super.call(this, props) || this;
+        _this.zIndex = (0, zIndex_1.getNextZIndex)();
         _this.closeOnClick = _this.closeOnClick.bind(_this);
         _this.closeOnScroll = (0, lodash_1.throttle)(_this.closeOnScroll.bind(_this), 200);
         _this.closeOnMouseLeave = _this.closeOnMouseLeave.bind(_this);
@@ -133,17 +135,22 @@ var PopupPositioner = /** @class */ (function (_super) {
     };
     PopupPositioner.prototype.render = function () {
         var _this = this;
-        var _a;
         return (React.createElement("div", { ref: function (el) {
                 _this.wrapperEl = el;
-            }, style: { zIndex: (_a = this.props.zIndex) !== null && _a !== void 0 ? _a : 1, position: 'absolute', left: '-100vw', display: 'flex' } }, this.props.children));
+            }, style: {
+                position: 'absolute',
+                left: '-100vw',
+                display: 'flex',
+                zIndex: this.zIndex,
+            } }, this.props.children));
     };
     return PopupPositioner;
 }(React.PureComponent));
+exports.PopupPositioner = PopupPositioner;
 /**
  * The popup will remove itself if click/scroll events are detected outside the popup.
  */
-function showPopup(referenceElement, placement, Component, zIndex, closeOnHoverEnd, onClose) {
+function showPopup(referenceElement, placement, Component, closeOnHoverEnd, onClose) {
     var el = document.createElement('div');
     document.body.appendChild(el);
     var closeFn = function () {
@@ -151,7 +158,7 @@ function showPopup(referenceElement, placement, Component, zIndex, closeOnHoverE
         el.remove();
         onClose === null || onClose === void 0 ? void 0 : onClose();
     };
-    react_dom_1.default.render((React.createElement(PopupPositioner, { referenceElement: referenceElement, placement: placement, onClose: closeFn, zIndex: zIndex, closeOnHoverEnd: closeOnHoverEnd || false },
+    react_dom_1.default.render((React.createElement(PopupPositioner, { referenceElement: referenceElement, placement: placement, onClose: closeFn, closeOnHoverEnd: closeOnHoverEnd || false },
         React.createElement(Component, { closePopup: closeFn }))), el);
     return { close: closeFn };
 }

package/react/components/SubNav.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 interface IProps {
     color?: 'light' | 'darker' | 'blueGrey' | 'blueGreyDarker';
-    zIndex?: number;
     theme?: 'light' | 'dark';
     className?: string;
 }

package/react/components/SubNav.js

@@ -74,11 +74,8 @@ var SubNav = /** @class */ (function (_super) {
             },
             _a["subnav--".concat(this.props.color)] = this.props.color || this.props.color !== undefined,
             _a), this.props.className);
-        var style = {
-            zIndex: 1000 + (this.props.zIndex ? this.props.zIndex : 0),
-        };
         var defaultTheme = darkColors.includes(this.props.color || '') ? 'dark-ui' : null;
-        return (React.createElement("div", { "data-theme": this.props.theme ? "".concat(this.props.theme, "-ui") : defaultTheme, className: classes, style: style }, this.props.children));
+        return (React.createElement("div", { "data-theme": this.props.theme ? "".concat(this.props.theme, "-ui") : defaultTheme, className: classes }, this.props.children));
     };
     return SubNav;
 }(React.PureComponent));

package/react/components/TreeMenu.d.ts

@@ -11,7 +11,6 @@ interface IState<T> {
     buttonTarget: Array<string>;
 }
 interface IProps<T> {
-    zIndex?: number;
     searchPlaceholder?: string;
     singleLevelSearch?: boolean;
     'data-test-id'?: string;
@@ -40,6 +39,7 @@ export declare class TreeMenu<T> extends React.Component<IProps<T>, IState<T>> {
     private treeMenuRef;
     private inputRef;
     private popperInstance;
+    private zIndex;
     constructor(props: IProps<T>);
     inputFocus: () => void;
     listNavigation: () => void;

package/react/components/TreeMenu.js

@@ -55,6 +55,7 @@ var TreeSelectItem_1 = require("./TreeSelect/TreeSelectItem");
 var KeyboardNavigation_1 = require("./TreeSelect/KeyboardNavigation");
 var WithPortal_1 = require("./WithPortal");
 var helpers_1 = require("../helpers");
+var zIndex_1 = require("../zIndex");
 function nodeHasChildren(item) {
     return item[(0, helpers_1.nameof)('children')] != null;
 }
@@ -77,6 +78,7 @@ var TreeMenu = /** @class */ (function (_super) {
     __extends(TreeMenu, _super);
     function TreeMenu(props) {
         var _this = _super.call(this, props) || this;
+        _this.zIndex = (0, zIndex_1.getNextZIndex)();
         _this.inputFocus = function () {
             var _a;
             (_a = _this.inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
@@ -298,7 +300,7 @@ var TreeMenu = /** @class */ (function (_super) {
             React.createElement("div", { ref: this.openDropdownRef }, this.props.children(this.toggle)),
             React.createElement(WithPortal_1.WithPortal, { active: this.state.openDropdown, "data-test-id": "tree-menu-popover" },
                 React.createElement("div", { ref: this.dropdownRef, className: "autocomplete autocomplete--multi-select autocomplete--fixed-width", style: {
-                        zIndex: this.props.zIndex,
+                        zIndex: this.zIndex,
                     } },
                     React.createElement("div", { className: 'autocomplete__header' },
                         React.createElement("div", { className: "autocomplete__icon", onClick: function () {

package/react/components/TreeSelect/TreeSelect.d.ts

@@ -28,7 +28,6 @@ interface IPropsBase<T> extends IInputWrapper {
     searchPlaceholder?: string;
     noResultsFoundMessage?: string;
     dropdownInitiallyOpen?: boolean;
-    zIndex?: number;
     sortable?: boolean;
     'data-test-id'?: string;
     getLabel(item: T): string;
@@ -63,6 +62,7 @@ export declare class TreeSelect<T> extends React.Component<IProps<T>, IState<T>>
     private treeSelectRef;
     private htmlId;
     private popperInstance;
+    private zIndex;
     constructor(props: IProps<T>);
     inputFocus: () => void;
     listNavigation: () => void;

package/react/components/TreeSelect/TreeSelect.js

@@ -77,6 +77,7 @@ var TreeSelectItem_1 = require("./TreeSelectItem");
 var KeyboardNavigation_1 = require("./KeyboardNavigation");
 var WithPortal_1 = require("../WithPortal");
 var react_beautiful_dnd_1 = require("react-beautiful-dnd");
+var zIndex_1 = require("../../zIndex");
 var reorder = function (list, startIndex, endIndex) {
     var result = Array.from(list);
     var removed = result.splice(startIndex, 1)[0];
@@ -88,6 +89,7 @@ var TreeSelect = /** @class */ (function (_super) {
     function TreeSelect(props) {
         var _this = _super.call(this, props) || this;
         _this.htmlId = (0, react_id_generator_1.default)();
+        _this.zIndex = (0, zIndex_1.getNextZIndex)();
         _this.inputFocus = function () {
             var _a;
             (_a = _this.inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
@@ -626,7 +628,7 @@ var TreeSelect = /** @class */ (function (_super) {
             React.createElement(WithPortal_1.WithPortal, { active: this.state.openDropdown, "data-test-id": "tree-select-popover" },
                 React.createElement("div", { className: "autocomplete autocomplete--multi-select"
                         + (this.props.width === 'medium' ? ' autocomplete--fixed-width' : ''), style: {
-                        zIndex: this.props.zIndex,
+                        zIndex: this.zIndex,
                         width: (_b = this.treeSelectRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth,
                     }, ref: this.dropdownRef },
                     React.createElement("div", { className: 'autocomplete__header' },

package/react/components/WithPopover.d.ts

@@ -6,7 +6,6 @@ export interface IPropsWithPopover {
     component: React.ComponentType<{
         closePopup(): void;
     }>;
-    zIndex?: number;
     closeOnHoverEnd?: boolean;
     onClose?: () => void;
 }

package/react/components/WithPopover.js

@@ -55,7 +55,7 @@ var WithPopover = /** @class */ (function (_super) {
             this.closePopup = undefined;
         }
         else {
-            this.closePopup = (0, ShowPopup_1.showPopup)(referenceElement, this.props.placement, this.props.component, this.props.zIndex, this.props.closeOnHoverEnd, function () {
+            this.closePopup = (0, ShowPopup_1.showPopup)(referenceElement, this.props.placement, this.props.component, this.props.closeOnHoverEnd, function () {
                 var _a, _b;
                 _this.closePopup = undefined;
                 (_b = (_a = _this.props).onClose) === null || _b === void 0 ? void 0 : _b.call(_a);

package/react/components/_Positioner.d.ts

@@ -6,7 +6,6 @@ type ICloseOthersEvent = CustomEvent<{
 interface IPropsPositioner {
     triggerSelector: string;
     placement: PopperOptions['placement'];
-    zIndex?: number;
     className?: string;
 }
 interface IStatePositioner {

package/react/components/_Positioner.js

@@ -53,6 +53,7 @@ exports.Positioner = void 0;
 var React = __importStar(require("react"));
 var ReactDOM = __importStar(require("react-dom"));
 var _popper = __importStar(require("popper.js"));
+var zIndex_1 = require("../zIndex");
 var Popper = _popper.default;
 var eventCloseOthers = 'superdesk-ui-framework.positioner.closeOthers';
 var padding = 5;
@@ -60,6 +61,7 @@ var PopperWrapper = /** @class */ (function (_super) {
     __extends(PopperWrapper, _super);
     function PopperWrapper(props) {
         var _this = _super.call(this, props) || this;
+        _this.zIndex = (0, zIndex_1.getNextZIndex)();
         _this.wrapper = document.createElement('div'); // avoid setting to null
         _this.closeDropdownOnOutsideClickBound = function (event) {
             _this.props.closeDropdownOnOutsideClick(_this.wrapper, event);
@@ -74,9 +76,7 @@ var PopperWrapper = /** @class */ (function (_super) {
             _this.props.handleCloseOthers(event);
         });
         var dropdownElement = this.wrapper;
-        if (this.props.zIndex != null) {
-            dropdownElement.style.zIndex = this.props.zIndex.toString();
-        }
+        dropdownElement.style.zIndex = this.zIndex.toString();
         var rect = this.props.triggerElement.getBoundingClientRect();
         var viewportHeight = document.documentElement.clientHeight;
         var viewportWidth = document.documentElement.clientWidth;

package/react/components/avatar/avatar-group.d.ts

@@ -12,7 +12,6 @@ export interface IPropsAvatarGroup {
      * if exceeded, "+1"/"+2"/"+n" button will be shown
      */
     max?: number | 'show-all';
-    zIndex?: number;
     onClick?(): void;
 }
 export declare class AvatarGroup extends React.PureComponent<IPropsAvatarGroup> {

package/react/components/avatar/avatar-group.js

@@ -71,8 +71,7 @@ var AvatarGroup = /** @class */ (function (_super) {
     }
     AvatarGroup.prototype.render = function () {
         var _this = this;
-        var _a;
-        var _b = this.props, size = _b.size, items = _b.items;
+        var _a = this.props, size = _a.size, items = _a.items;
         var someIconsHaveExtraElements = items.filter(isAvatar).some(function (_a) {
             var icon = _a.icon, administratorIndicator = _a.administratorIndicator;
             return icon != null || administratorIndicator != null;
@@ -104,7 +103,7 @@ var AvatarGroup = /** @class */ (function (_super) {
             }
         };
         var someHaveDisplayName = this.props.items.some(function (item) { return isAvatar(item) && item.displayName.length > 0; });
-        return (React.createElement(WithPopover_1.WithPopover, { zIndex: (_a = this.props.zIndex) !== null && _a !== void 0 ? _a : 101, placement: 'bottom-end', component: function () { return (React.createElement("div", { className: "avatar-popup" }, _this.props.items.map(function (item, index) {
+        return (React.createElement(WithPopover_1.WithPopover, { placement: 'bottom-end', component: function () { return (React.createElement("div", { className: "avatar-popup" }, _this.props.items.map(function (item, index) {
                 return (someHaveDisplayName
                     ? React.createElement(common_1.Spacer, { h: true, alignItems: 'center', gap: '16', noGrow: true, key: index },
                         isAvatar(item)

package/react/index.d.ts

@@ -92,6 +92,7 @@ export { ContentListItem } from './components/Lists/ContentList';
 export { MultiSelect } from './components/MultiSelect';
 export { ResizablePanels } from './components/ResizablePanels';
 export { WithPopover } from './components/WithPopover';
+export { PopupPositioner, showPopup } from './components/ShowPopup';
 export { Spacer, SpacerBlock } from '@superdesk/common';
 export { ResizeObserverComponent } from './components/ResizeObserverComponent';
 export { DragHandleDots } from './components/DragHandleDots';

package/react/index.js

@@ -18,7 +18,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Divider = exports.Icon = exports.Prop = exports.PropsList = exports.StrechBar = exports.SlidingToolbar = exports.SubNavDivider = exports.SubNav = exports.LeftMenu = exports.TabList = exports.Tab = exports.NavButton = exports.CheckButtonGroup = exports.CheckGroup = exports.CheckboxButton = exports.RadioButtonGroup = exports.Checkbox = exports.RadioGroup = exports.Loader = exports.ButtonGroup = exports.SwitchGroup = exports.Switch = exports.FormLabel = exports.TimePickerV2 = exports.TimePicker = exports.DatePickerISO = exports.DatePicker = exports.getDurationString = exports.DurationInput = exports.Tooltip = exports.IconLabel = exports.IconButton = exports.Rotate = exports.AvatarPlaceholder = exports.Avatar = exports.AvatarGroup = exports.AvatarContentImage = exports.AvatarContentText = exports.AvatarWrapper = exports.Alert = exports.Badge = exports.Label = exports.Popover = exports.WithPagination = exports.SelectWithTemplate = exports.Option = exports.Select = exports.Input = exports.Button = exports.HelloWorld = void 0;
 exports.Time = exports.Text = exports.LoadingOverlay = exports.Spinner = exports.ListItemLoader = exports.Skeleton = exports.IllustrationButton = exports.SvgIconIllustration = exports.WithSizeObserver = exports.SearchBar = exports.CreateButton = exports.DropZone = exports.ThemeSelector = exports.IconPicker = exports.SelectGrid = exports.ToggleBox = exports.Menu = exports.toasted = exports.GridItemCheckWrapper = exports.GridItemTopActions = exports.GridItemFooterActions = exports.GridItemFooterBlock = exports.GridItemSlug = exports.GridItemText = exports.GridItemTitle = exports.GridItemTime = exports.GridItemContentBlock = exports.GridItemFooter = exports.GridItemMedia = exports.GridItemContent = exports.GridItem = exports.GridList = exports.Modal = exports.Carousel = exports.DonutChart = exports.Autocomplete = exports.EmptyState = exports.Tabs = exports.TabContent = exports.TabPanel = exports.TabLabel = exports.TagInput = exports.Tag = exports.Dropdown = exports.DropdownDivider = exports.DropdownLabel = exports.DropdownItem = exports.DropdownFirst = exports.HeadingText = exports.ContentDivider = void 0;
-exports.DragHandle = exports.DragHandleDots = exports.ResizeObserverComponent = exports.SpacerBlock = exports.Spacer = exports.WithPopover = exports.ResizablePanels = exports.MultiSelect = exports.ContentListItem = exports.TableListItem = exports.TableList = exports.TreeMenu = exports.TreeSelect = exports.BottomNav = exports.Heading = void 0;
+exports.DragHandle = exports.DragHandleDots = exports.ResizeObserverComponent = exports.SpacerBlock = exports.Spacer = exports.showPopup = exports.PopupPositioner = exports.WithPopover = exports.ResizablePanels = exports.MultiSelect = exports.ContentListItem = exports.TableListItem = exports.TableList = exports.TreeMenu = exports.TreeSelect = exports.BottomNav = exports.Heading = void 0;
 var HelloWorld_1 = require("./components/HelloWorld");
 Object.defineProperty(exports, "HelloWorld", { enumerable: true, get: function () { return HelloWorld_1.HelloWorld; } });
 var Button_1 = require("./components/Button");
@@ -222,6 +222,9 @@ var ResizablePanels_1 = require("./components/ResizablePanels");
 Object.defineProperty(exports, "ResizablePanels", { enumerable: true, get: function () { return ResizablePanels_1.ResizablePanels; } });
 var WithPopover_1 = require("./components/WithPopover");
 Object.defineProperty(exports, "WithPopover", { enumerable: true, get: function () { return WithPopover_1.WithPopover; } });
+var ShowPopup_1 = require("./components/ShowPopup");
+Object.defineProperty(exports, "PopupPositioner", { enumerable: true, get: function () { return ShowPopup_1.PopupPositioner; } });
+Object.defineProperty(exports, "showPopup", { enumerable: true, get: function () { return ShowPopup_1.showPopup; } });
 var common_1 = require("@superdesk/common");
 Object.defineProperty(exports, "Spacer", { enumerable: true, get: function () { return common_1.Spacer; } });
 Object.defineProperty(exports, "SpacerBlock", { enumerable: true, get: function () { return common_1.SpacerBlock; } });

package/react/zIndex.d.ts

@@ -0,0 +1,2 @@
+export declare let zIndex: number;
+export declare function getNextZIndex(): number;

package/react/zIndex.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getNextZIndex = exports.zIndex = void 0;
+exports.zIndex = 1100;
+function getNextZIndex() {
+    return ++exports.zIndex;
+}
+exports.getNextZIndex = getNextZIndex;