superdesk-ui-framework 3.1.29 → 4.0.1

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>
         );

package/app-typescript/components/TreeMenu.tsx

@@ -5,6 +5,7 @@ import {getPrefixedItemId, TreeSelectItem} from './TreeSelect/TreeSelectItem';
 import {keyboardNavigation} from './TreeSelect/KeyboardNavigation';
 import {WithPortal} from './WithPortal';
 import {nameof} from '../helpers';
+import {getNextZIndex} from '../zIndex';
 
 interface IState<T> {
     options: Array<ITreeMenuNode<T>>;
@@ -21,7 +22,6 @@ interface IState<T> {
 }
 
 interface IProps<T> {
-    zIndex?: number;
     searchPlaceholder?: string;
     singleLevelSearch?: boolean;
     'data-test-id'?: string;
@@ -78,6 +78,7 @@ export class TreeMenu<T> extends React.Component<IProps<T>, IState<T>> {
     private treeMenuRef: React.RefObject<HTMLDivElement>;
     private inputRef: React.RefObject<HTMLInputElement>;
     private popperInstance: Instance | null;
+    private zIndex: number = getNextZIndex();
 
     constructor(props: IProps<T>) {
         super(props);
@@ -357,7 +358,7 @@ export class TreeMenu<T> extends React.Component<IProps<T>, IState<T>> {
                         ref={this.dropdownRef}
                         className="autocomplete autocomplete--multi-select autocomplete--fixed-width"
                         style={{
-                            zIndex: this.props.zIndex,
+                            zIndex: this.zIndex,
                         }}
                     >
                         <div className='autocomplete__header'>

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

@@ -14,6 +14,7 @@ import {getPrefixedItemId, TreeSelectItem} from './TreeSelectItem';
 import {keyboardNavigation} from './KeyboardNavigation';
 import {WithPortal} from '../WithPortal';
 import { DragDropContext, Droppable, Draggable, DropResult } from "react-beautiful-dnd";
+import {getNextZIndex} from '../../zIndex';
 
 const reorder = (list: Array<any>, startIndex: number, endIndex: number) => {
     const result = Array.from(list);
@@ -53,7 +54,6 @@ interface IPropsBase<T> extends IInputWrapper {
     searchPlaceholder?: string;
     noResultsFoundMessage?: string;
     dropdownInitiallyOpen?: boolean;
-    zIndex?: number;
     sortable?: boolean;
     'data-test-id'?: string;
     getLabel(item: T): string;
@@ -94,6 +94,7 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
     private treeSelectRef: React.RefObject<HTMLDivElement>;
     private htmlId: string = nextId();
     private popperInstance: Instance | null;
+    private zIndex: number = getNextZIndex();
 
     constructor(props: IProps<T>) {
         super(props);
@@ -887,7 +888,7 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
                             + (this.props.width === 'medium' ? ' autocomplete--fixed-width' : '')
                         }
                         style={{
-                            zIndex: this.props.zIndex,
+                            zIndex: this.zIndex,
                             width: this.treeSelectRef.current?.offsetWidth,
                         }}
                         ref={this.dropdownRef}

package/app-typescript/components/WithPopover.tsx

@@ -7,7 +7,6 @@ export interface IPropsWithPopover {
     children(toggle: (referenceElement: HTMLElement) => void): React.ReactNode;
     placement: Placement;
     component: React.ComponentType<{closePopup(): void}>;
-    zIndex?: number;
     closeOnHoverEnd?: boolean;
     onClose?: () => void;
 }
@@ -30,7 +29,6 @@ export class WithPopover extends React.PureComponent<IPropsWithPopover> {
                 referenceElement,
                 this.props.placement,
                 this.props.component,
-                this.props.zIndex,
                 this.props.closeOnHoverEnd,
                 () => {
                     this.closePopup = undefined;

package/app-typescript/components/_Positioner.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import * as _popper from 'popper.js';
 import {PopperOptions} from 'popper.js';
+import {getNextZIndex} from '../zIndex';
 
 const Popper = _popper.default;
 
@@ -22,6 +23,7 @@ class PopperWrapper extends React.Component<IPropsPopperWrapper> {
     wrapper: HTMLDivElement;
     popperInstance: any;
     previouslyFocusedElement: HTMLElement | undefined;
+    public zIndex: number = getNextZIndex();
 
     constructor(props: IPropsPopperWrapper) {
         super(props);
@@ -42,9 +44,7 @@ class PopperWrapper extends React.Component<IPropsPopperWrapper> {
 
         const dropdownElement = this.wrapper;
 
-        if (this.props.zIndex != null) {
-            dropdownElement.style.zIndex = this.props.zIndex.toString();
-        }
+        dropdownElement.style.zIndex = this.zIndex.toString();
 
         const rect = this.props.triggerElement.getBoundingClientRect();
 
@@ -110,7 +110,6 @@ class PopperWrapper extends React.Component<IPropsPopperWrapper> {
 interface IPropsPositioner {
     triggerSelector: string;
     placement: PopperOptions['placement'];
-    zIndex?: number;
     className?: string;
 }
 

package/app-typescript/components/avatar/avatar-group.tsx

@@ -24,8 +24,6 @@ export interface IPropsAvatarGroup {
      */
     max?: number | 'show-all';
 
-    zIndex?: number;
-
     // unless a custom onClick handler is passed
     // a popover would get shown when maximum number
     // of avatars is exceeded.
@@ -78,7 +76,6 @@ export class AvatarGroup extends React.PureComponent<IPropsAvatarGroup> {
 
         return (
             <WithPopover
-                zIndex={this.props.zIndex ?? 101}
                 placement='bottom-end'
                 component={() => (
                     <div className="avatar-popup">

package/app-typescript/index.ts

@@ -100,6 +100,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/app-typescript/zIndex.tsx

@@ -0,0 +1,5 @@
+export let zIndex = 1100;
+
+export function getNextZIndex() {
+    return ++zIndex;
+}

package/dist/components/CreateButton.tsx

@@ -17,7 +17,7 @@ export default class CreateButtonDoc extends React.Component {
 
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
-                        <SubNav zIndex={2}>
+                        <SubNav>
                             <ButtonGroup align='start' spaces='no-space'>
                                 <Tooltip text='Filters' flow='right'>
                                     <NavButton icon='filter-large' type='darker' state="active" text="Filter" onClick={() => false} />
@@ -34,7 +34,7 @@ export default class CreateButtonDoc extends React.Component {
                         </SubNav>
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
-                        <SubNav zIndex={2}>
+                        <SubNav>
                             <ButtonGroup align='start' spaces='no-space'>
                                 <Tooltip text='Filters' flow='right'>
                                     <NavButton icon='filter-large' type='darker' state="active" text="Filter" onClick={() => false} />