superdesk-ui-framework 3.1.27 → 4.0.0

package/app/styles/layout/_editor.scss

@@ -233,7 +233,7 @@
 
     &.authoring-header--collapsed {
         max-height: 0;
-        padding: 0 $sd-base-increment * 1.5;
+        padding: 0 $sd-base-increment * 1.5 !important;
 
         .authoring-header__toggle {
             i {

package/app-typescript/components/Dropdown.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { createPopper } from '@popperjs/core';
 import { useId } from "react-id-generator";
+import {getNextZIndex} from './../zIndex';
 
 export interface IMenuItem {
     label: string | React.ReactNode;
@@ -33,9 +34,7 @@ interface IMenu {
     items: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
     header?: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
     footer?: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
-    append?: boolean;
     children: React.ReactNode;
-    zIndex?: number;
     onChange?(event?: any): void;
     maxHeight?: number;
 }
@@ -47,12 +46,16 @@ export const Dropdown = ({
     header,
     footer,
     children,
-    append,
     align,
-    zIndex,
     onChange,
     maxHeight,
 }: IMenu) => {
+    const [zIndex, setZIndex] = React.useState<number>(-1);
+
+    if (zIndex === -1) {
+        setZIndex(getNextZIndex());
+    }
+
     const [open, setOpen] = React.useState(false);
     const [change, setChange] = React.useState(false);
     const [menuID] = useId();
@@ -87,7 +90,7 @@ export const Dropdown = ({
     }, [change]);
 
     React.useLayoutEffect(() => {
-        if (append && change) {
+        if (change) {
             addInPlaceholder();
         }
         setChange(true);
@@ -96,10 +99,11 @@ export const Dropdown = ({
     function createAppendMenu() {
         if (header && footer) {
             return (
-                <div className='dropdown__menu dropdown__menu--has-head-foot'
+                <div
+                    className='dropdown__menu dropdown__menu--has-head-foot'
                     id={menuID} role='menu'
                     ref={ref}
-                    style={{zIndex: zIndex}}
+                    style={{zIndex}}
                 >
                     <ul className='dropdown__menu-header'>
                         {headerElements}
@@ -114,10 +118,13 @@ export const Dropdown = ({
             );
         } else if (header) {
             return (
-                <div className='dropdown__menu dropdown__menu--has-head-foot'
-                id={menuID} role='menu'
-                ref={ref}
-                style={{zIndex: zIndex}}>
+                <div
+                    className='dropdown__menu dropdown__menu--has-head-foot'
+                    id={menuID}
+                    role='menu'
+                    ref={ref}
+                    style={{zIndex}}
+                >
                     <ul className='dropdown__menu-header'>
                         {headerElements}
                     </ul>
@@ -128,11 +135,13 @@ export const Dropdown = ({
             );
         } else if (footer) {
             return (
-                <div className='dropdown__menu dropdown__menu--has-head-foot'
-                id={menuID}
-                role='menu'
-                ref={ref}
-                style={{zIndex: zIndex}}>
+                <div
+                    className='dropdown__menu dropdown__menu--has-head-foot'
+                    id={menuID}
+                    role='menu'
+                    ref={ref}
+                    style={{zIndex}}
+                >
                     <ul className='dropdown__menu-body'>
                         {dropdownElements}
                     </ul>
@@ -143,10 +152,13 @@ export const Dropdown = ({
             );
         } else {
             return (
-                <ul className='dropdown__menu '
-                id={menuID} role='menu'
-                ref={ref}
-                style={{...{zIndex: zIndex, overflowY: 'auto'}, ...maxHeightStyle}}>
+                <ul
+                    className='dropdown__menu '
+                    id={menuID}
+                    role='menu'
+                    ref={ref}
+                    style={{...{zIndex, overflowY: 'auto'}, ...maxHeightStyle}}
+                >
                     {dropdownElements}
                 </ul>
             );
@@ -157,27 +169,17 @@ export const Dropdown = ({
         if (!open) {
             let menuRef: any;
             setOpen(true);
-            if (!append) {
+            setTimeout(() => {
                 menuRef = ref.current;
                 let toggleRef = buttonRef.current;
                 if (toggleRef && menuRef) {
                     createPopper(toggleRef, menuRef, {
                         placement: checkAlign() ? 'bottom-end' : 'bottom-start',
+                        strategy: 'fixed',
                     });
+                    menuRef.style.display = 'block';
                 }
-            } else {
-                setTimeout(() => {
-                    menuRef = ref.current;
-                    let toggleRef = buttonRef.current;
-                    if (toggleRef && menuRef) {
-                        createPopper(toggleRef, menuRef, {
-                            placement: checkAlign() ? 'bottom-end' : 'bottom-start',
-                            strategy: 'fixed',
-                        });
-                        menuRef.style.display = 'block';
-                    }
-                }, 0);
-            }
+            }, 0);
             document.addEventListener('click', closeMenu);
             setTimeout(() => {
                 menuRef.getElementsByTagName('button')[0].focus();
@@ -218,20 +220,23 @@ export const Dropdown = ({
             item['items'].forEach((el: any, key: number) => {
                 submenuItems.push(each(el, key));
             });
+
             return (
                 <DropdownItemWithSubmenu
-                key={index}
-                index={index}
-                item={item}
-                menuID={menuID}
-                subMenuItems={submenuItems}
-                onChange={onChange} />
+                    key={index}
+                    index={index}
+                    item={item}
+                    menuID={menuID}
+                    subMenuItems={submenuItems}
+                    onChange={onChange}
+                />
             );
         } else if (item['type'] === 'group') {
             let groupItems: any = [];
             item['items'].forEach((el: any, key: number) => {
                 groupItems.push(each(el, key));
             });
+
             return (
                 <React.Fragment key={index}>
                     <li>
@@ -245,108 +250,52 @@ export const Dropdown = ({
         } else {
             return (
                 <DropdownItem
-                key={index}
-                label={item['label']}
-                icon={item['icon']}
-                active={item['active']}
-                onSelect={item['onSelect']}
-                onChange={onChange} />
+                    key={index}
+                    label={item['label']}
+                    icon={item['icon']}
+                    active={item['active']}
+                    onSelect={item['onSelect']}
+                    onChange={onChange}
+                />
             );
         }
     }
 
     return (
         <div className={'dropdown ' + (open ? 'open' : '')}>
-            {typeof children === 'object' ?
-                (React.isValidElement(children) ?
-                    <div ref={buttonRef} style={{ display: 'content' }}>
-                        {(() => {
-                            const attrs = {
-                                className: children.props.className
-                                    ? (children.props.className + ' dropdown__toggle dropdown-toggle')
-                                    : 'dropdown__toggle dropdown-toggle',
-                                'aria-haspopup': "menu",
-                                'aria-expanded': open,
-                                onClick: toggleDisplay,
-                                ref: buttonRef,
-                            };
-
-                            return React.cloneElement(children, attrs);
-                        })()}
-                    </div> : null)
-                :
-                <button
-                    style={{whiteSpace: 'nowrap'}}
-                    ref={buttonRef}
-                    className=' dropdown__toggle dropdown-toggle'
-                    aria-haspopup="menu"
-                    tabIndex={0}
-                    aria-expanded={open}
-                    onClick={toggleDisplay}
-                >
-                    {children}
-                    <span className="dropdown__caret"></span>
-                </button>}
+            {
+                typeof children === 'object'
+                    ? (React.isValidElement(children)
+                        ? <div ref={buttonRef} style={{ display: 'content' }}>
+                            {(() => {
+                                const attrs = {
+                                    className: children.props.className
+                                        ? (children.props.className + ' dropdown__toggle dropdown-toggle')
+                                        : 'dropdown__toggle dropdown-toggle',
+                                    'aria-haspopup': "menu",
+                                    'aria-expanded': open,
+                                    onClick: toggleDisplay,
+                                    ref: buttonRef,
+                                };
 
-            {append ?
-                null : (function() {
-                    if (header && footer) {
-                        return (
-                            <div className='dropdown__menu dropdown__menu--has-head-foot'
-                            role='menu'
-                            ref={ref}
-                            style={{zIndex: zIndex}}>
-                                <ul className='dropdown__menu-header'>
-                                    {headerElements}
-                                </ul>
-                                <ul className='dropdown__menu-body'>
-                                    {dropdownElements}
-                                </ul>
-                                <ul className='dropdown__menu-footer dropdown__menu-footer--has-list '>
-                                    {footerElements}
-                                </ul>
-                            </div>
-                        );
-                    } else if (header) {
-                        return (
-                            <div className='dropdown__menu dropdown__menu--has-head-foot'
-                            role='menu'
-                            ref={ref}
-                            style={{zIndex: zIndex}}>
-                                <ul className='dropdown__menu-header'>
-                                    {headerElements}
-                                </ul>
-                                <ul className='dropdown__menu-body'>
-                                    {dropdownElements}
-                                </ul>
-                            </div>
-                        );
-                    } else if (footer) {
-                        return (
-                            <div className='dropdown__menu dropdown__menu--has-head-foot'
-                            role='menu'
-                            ref={ref}
-                            style={{zIndex: zIndex}}>
-                                <ul className='dropdown__menu-body'>
-                                    {dropdownElements}
-                                </ul>
-                                <ul className='dropdown__menu-footer dropdown__menu-footer--has-list '>
-                                    {footerElements}
-                                </ul>
-                            </div>
-                        );
-                    } else {
-                        return (
-                            <ul className='dropdown__menu'
-                            role='menu'
-                            ref={ref}
-                            style={{zIndex: zIndex}}>
-                                {dropdownElements}
-                            </ul>
-                        );
-                    }
-                })()}
-        </div >
+                                return React.cloneElement(children, attrs);
+                            })()}
+                        </div>
+                        : null)
+                    : <button
+                        style={{whiteSpace: 'nowrap'}}
+                        ref={buttonRef}
+                        className=' dropdown__toggle dropdown-toggle'
+                        aria-haspopup="menu"
+                        tabIndex={0}
+                        aria-expanded={open}
+                        onClick={toggleDisplay}
+                    >
+                        {children}
+                        <span className="dropdown__caret"></span>
+                    </button>
+            }
+        </div>
     );
 };
 
@@ -359,16 +308,18 @@ onChange,
 }: IMenuItemRes) => {
     return (
         <li role='none' className={active ? 'dropdown__menu-item--active' : ''}>
-            <button tabIndex={0}
-            role='menuitem'
-            onClick={() => {
-                setTimeout(() => {
-                    onSelect();
-                });
-                if (onChange) {
-                    onChange();
-                }
-            }}>
+            <button
+                tabIndex={0}
+                role='menuitem'
+                onClick={() => {
+                    setTimeout(() => {
+                        onSelect();
+                    });
+                    if (onChange) {
+                        onChange();
+                    }
+                }}
+            >
                 <i className={icon ? ('icon-' + icon) : ''}></i>
                 {label}
             </button>
@@ -410,31 +361,35 @@ const DropdownItemWithSubmenu = ({
 
     return (
         <li key={index} ref={refButtonSubMenu}>
-            <div className='dropdown'
-            onMouseLeave={() => setOpen(false)}>
+            <div
+                className='dropdown'
+                onMouseLeave={() => setOpen(false)}
+            >
                 <button
-                className='dropdown__toggle dropdown-toggle'
-                aria-haspopup="menu"
-                tabIndex={0}
-                onClick={() => {
-                    if (item.onSelect) {
-                        setTimeout(() => {
-                            item.onSelect();
-                        });
-                    }
-                    if (onChange) {
-                        onChange();
-                    }
-                }}
-                onMouseOver={() => setOpen(true) }>
+                    className='dropdown__toggle dropdown-toggle'
+                    aria-haspopup="menu"
+                    tabIndex={0}
+                    onClick={() => {
+                        if (item.onSelect) {
+                            setTimeout(() => {
+                                item.onSelect();
+                            });
+                        }
+                        if (onChange) {
+                            onChange();
+                        }
+                    }}
+                    onMouseOver={() => setOpen(true)}
+                >
                     {item['icon'] ? <i className={'icon-' + item['icon']}></i> : null}
                     {item['label']}
                 </button>
                 <ul
-                role='menu'
-                ref={refSubMenu}
-                style={{display: 'none'}}
-                className='dropdown__menu'>
+                    role='menu'
+                    ref={refSubMenu}
+                    style={{display: 'none'}}
+                    className='dropdown__menu'
+                >
                     {subMenuItems}
                 </ul>
             </div>

package/app-typescript/components/Layouts/Panel.tsx

@@ -3,6 +3,7 @@ import { IconButton } from '../IconButton';
 import { Spinner, LoadingOverlay } from '../Spinner';
 import classNames from 'classnames';
 import {ButtonGroup} from '../ButtonGroup';
+import {getNextZIndex} from '../../zIndex';
 
 // ============= Panel ============ //
 
@@ -64,7 +65,6 @@ export default class Panel extends React.PureComponent<IPropsPanel> {
 
 interface IPropsPanelHeader {
     color?: 'light' | 'darker' | 'blueGrey' | 'blueGreyDarker'; // defaults to 'light'
-    zIndex?: number;
     title?: string;
     theme?: 'light-ui' | 'dark-ui'; // defaults to 'light
     className?: string;
@@ -73,6 +73,7 @@ interface IPropsPanelHeader {
 }
 
 class PanelHeader extends React.PureComponent<IPropsPanelHeader> {
+    private zIndex: number = getNextZIndex();
     constructor(props: IPropsPanelHeader) {
         super(props);
     }
@@ -86,7 +87,7 @@ class PanelHeader extends React.PureComponent<IPropsPanelHeader> {
         }, this.props.className);
 
         let style = {
-            zIndex: this.props.zIndex ? this.props.zIndex : 10,
+            zIndex: this.zIndex,
         };
 
         let defaultTheme = darkColors.includes(this.props.color || '') ? 'dark-ui' : null;

package/app-typescript/components/Menu.tsx

@@ -4,6 +4,7 @@ import {SyntheticEvent} from 'react';
 import {TieredMenu} from '@superdesk/primereact/tieredmenu';
 import {MenuItem as IPrimeMenuItem} from '@superdesk/primereact/components/menuitem/MenuItem';
 import {assertNever} from '../helpers';
+import {getNextZIndex} from '../zIndex';
 
 /**
  * Known issues:
@@ -57,11 +58,8 @@ interface IMenuBranch {
 interface IProps {
     items: Array<IMenuItem>;
     children: (toggle: (event: SyntheticEvent) => void) => JSX.Element;
-    zIndex?: number;
 }
 
-const superdeskTopBarZIndex = 1050;
-
 function isSeparator(item: IMenuItem): item is ISeparator {
     return (item as any)['separator'] === true;
 }
@@ -77,6 +75,7 @@ function isMenuBranch(item: IMenuItem): item is IMenuBranch {
 export class Menu extends React.Component<IProps, {}> {
     private menu: TieredMenu | null;
     private focusedBefore: Element | null;
+    private zIndex: number = getNextZIndex();
 
     constructor(props: IProps) {
         super(props);
@@ -164,7 +163,7 @@ export class Menu extends React.Component<IProps, {}> {
                             }
                         }}
                         data-test-id="menu"
-                        zIndex={this.props.zIndex ?? superdeskTopBarZIndex}
+                        zIndex={this.zIndex}
                     />
                 </div>
             </React.Fragment>

package/app-typescript/components/Modal.tsx

@@ -2,13 +2,13 @@ import * as React from 'react';
 import { Dialog as PrimeDialog } from '@superdesk/primereact/dialog';
 import classNames from 'classnames';
 import {noop} from 'lodash';
+import {getNextZIndex} from './../zIndex';
 
 interface IProps {
     id?: string;
     className?: string;
     theme?: string;
     visible?: boolean;
-    zIndex?: number;
     closeOnEscape?: boolean;
     contentBg?: 'default' | 'medium' | 'dark';
     contentPadding?: 'none' | 'small' | 'medium' | 'large';
@@ -33,6 +33,8 @@ interface IProps {
 }
 
 export class Modal extends React.Component<IProps, {}> {
+    private zIndex: number = getNextZIndex();
+
     render() {
         let classes = classNames({
             [`p-dialog-content--${this.props.size}`]: this.props.size,
@@ -58,7 +60,7 @@ export class Modal extends React.Component<IProps, {}> {
                     contentClassName={classes}
                     onShow={this.props.onShow}
                     onHide={this.props.onHide ?? noop}
-                    zIndex={this.props.zIndex ? this.props.zIndex : 1000}
+                    zIndex={this.zIndex}
                     position={this.props.position}
                     closable={this.props.onHide != null ? true : false}
                 >

package/app-typescript/components/MultiSelect.tsx

@@ -5,6 +5,7 @@ import nextId from "react-id-generator";
 import { InputWrapper } from "./Form";
 import {IInputWrapper} from './Form/InputWrapper';
 import {SelectPreview} from './SelectPreview';
+import {getNextZIndex} from '../zIndex';
 
 interface IProps<T> extends IInputWrapper {
     value: Array<T>;
@@ -19,7 +20,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;
@@ -34,6 +34,7 @@ interface IState<T> {
 
 export class MultiSelect<T> extends React.Component<IProps<T>, IState<T>> {
     private htmlId = nextId();
+    private zIndex: number = getNextZIndex();
 
     constructor(props: IProps<T>) {
         super(props);
@@ -80,7 +81,7 @@ export class MultiSelect<T> extends React.Component<IProps<T>, IState<T>> {
                     options={this.props.options}
                     onChange={({value}) => this.props.onChange(value)}
                     display="chip"
-                    zIndex={this.props.zIndex}
+                    zIndex={this.zIndex}
                     filter={this.props.filter}
                     appendTo={document.body}
                     placeholder={this.props.placeholder}

package/app-typescript/components/Popover.tsx

@@ -7,7 +7,6 @@ interface IProps {
     triggerSelector: string; // CSS selector for an element that will be used to toggle the popover.
     displayCloseButton?: boolean; // defaults to true
     placement?: PopperOptions['placement']; // defaults to auto
-    zIndex?: number;
 }
 
 export class Popover extends React.Component<IProps> {
@@ -17,7 +16,6 @@ export class Popover extends React.Component<IProps> {
                 triggerSelector={this.props.triggerSelector}
                 placement={this.props.placement ?? 'auto'}
                 className="sd-popover"
-                zIndex={this.props.zIndex}
             >
                 <div className="sd-popover__header">
                     <h4 className="sd-popover__title" tabIndex={0} id='popoverTitle'>{this.props.title}</h4>

package/app-typescript/components/SelectWithTemplate.tsx

@@ -29,7 +29,9 @@ interface IState<T> {
 }
 
 const labelKey = 'label';
-
+/**
+ * @deprecated use MultiSelect or TreeSelect
+ */
 export class SelectWithTemplate<T> extends React.Component<IProps<T>, IState<T>> {
     componentRef: Dropdown | null;
     private htmlId = nextId();

package/app-typescript/components/ShowPopup.tsx

@@ -4,18 +4,19 @@ import ReactDOM from 'react-dom';
 import {createPopper, Instance as PopperInstance, Placement, Modifier} from '@popperjs/core';
 import {throttle} from 'lodash';
 import maxSize from 'popper-max-size-modifier';
+import {getNextZIndex} from '../zIndex';
 
 interface IPropsPopupPositioner {
     referenceElement: HTMLElement;
     placement: Placement;
-    zIndex?: number;
     onClose(): void;
     closeOnHoverEnd?: boolean;
 }
 
-class PopupPositioner extends React.PureComponent<IPropsPopupPositioner> {
+export class PopupPositioner extends React.PureComponent<IPropsPopupPositioner> {
     private wrapperEl: HTMLDivElement | null;
     private popper: PopperInstance | null;
+    private zIndex: number = getNextZIndex();
 
     constructor(props: IPropsPopupPositioner) {
         super(props);
@@ -123,7 +124,12 @@ class PopupPositioner extends React.PureComponent<IPropsPopupPositioner> {
                 ref={(el) => {
                     this.wrapperEl = el;
                 }}
-                style={{zIndex: this.props.zIndex ?? 1, position: 'absolute', left: '-100vw', display: 'flex'}}
+                style={{
+                    position: 'absolute',
+                    left: '-100vw',
+                    display: 'flex',
+                    zIndex: this.zIndex,
+                }}
             >
                 {this.props.children}
             </div>
@@ -138,7 +144,6 @@ export function showPopup(
     referenceElement: HTMLElement,
     placement: Placement,
     Component: React.ComponentType<{closePopup(): void}>,
-    zIndex?: number,
     closeOnHoverEnd?: boolean,
     onClose?: () => void,
 ): {close: () => void} {
@@ -158,7 +163,6 @@ export function showPopup(
                 referenceElement={referenceElement}
                 placement={placement}
                 onClose={closeFn}
-                zIndex={zIndex}
                 closeOnHoverEnd={closeOnHoverEnd || false}
             >
                 <Component

package/app-typescript/components/SubNav.tsx

@@ -3,7 +3,6 @@ import classNames from 'classnames';
 
 interface IProps {
     color?: 'light' | 'darker' | 'blueGrey' | 'blueGreyDarker'; // defaults to 'light'
-    zIndex?: number;
     theme?: 'light' | 'dark'; // defaults to 'light
     className?: string;
 }
@@ -32,14 +31,14 @@ export class SubNav extends React.PureComponent<IProps> {
             'subnav--light': this.props.color === undefined,
             [`subnav--${this.props.color}`]: this.props.color || this.props.color !== undefined,
         }, this.props.className);
-        let style = {
-            zIndex: 1000 + (this.props.zIndex ? this.props.zIndex : 0),
-        };
+
         let defaultTheme = darkColors.includes(this.props.color || '') ? 'dark-ui' : null;
 
         return (
-            <div data-theme={this.props.theme ? `${this.props.theme}-ui` : defaultTheme}
-                className={classes} style={style}>
+            <div
+                data-theme={this.props.theme ? `${this.props.theme}-ui` : defaultTheme}
+                className={classes}
+            >
                 {this.props.children}
             </div>
         );