superdesk-ui-framework 3.1.28 → 4.0.0

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} />