superdesk-ui-framework 3.1.27 → 4.0.0

package/examples/pages/components/NavButtons.tsx

@@ -17,7 +17,7 @@ export default class NavButtonsDoc 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} />
@@ -36,7 +36,7 @@ export default class NavButtonsDoc 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} />
@@ -59,7 +59,7 @@ export default class NavButtonsDoc extends React.Component {
                 <h3 className="docs-page__h3">Styles / Types</h3>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
-                        <SubNav zIndex={2}>
+                        <SubNav>
                             <ButtonGroup align='start' spaces='no-space'>
                                 <NavButton icon='adjust' type='default' text="Adjust" onClick={() => false} />
                                 <NavButton icon='eye-open' type='darker' text="View" onClick={() => false} />
@@ -72,7 +72,7 @@ export default class NavButtonsDoc extends React.Component {
                         </SubNav>
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
-                        <SubNav zIndex={2}>
+                        <SubNav>
                             <ButtonGroup align='start' spaces='no-space'>
                                 <NavButton icon='adjust' type='default' text="Adjust" onClick={() => false} />
                                 <NavButton icon='eye-open' type='darker' text="View" onClick={() => false} />

package/examples/pages/components/Panel.tsx

@@ -359,7 +359,6 @@ export default class PanelDoc extends React.Component<IProps, IState> {
                 <p className="docs-page__paragraph">PanelHeader</p>
                 <PropsList>
                     <Prop name='title' isRequired={false} type='string' default='/' description='Specifies the title of the panel.'/>
-                    <Prop name='zIndex' isRequired={false} type='number' default='1' description='Increase the z-index of the header if needed.'/>
                     <Prop name='theme' isRequired={false} type='light | dark' default='/' description='Explicitly define the theme just for the of Panel Header. All child elements and the content inside the Header will inherit the selected theme.'/>
                     <Prop name='color' isRequired={false} type='light | darker | blueGrey | blueGreyDarker' default='light' description='Background colour of the Panel Header. blueGrey and blueGreyDarker will also change the text colour to white.'/>
                     <Prop name='ClassName' isRequired={false} type='string' default='false' description='Add custom or helper classes to modify the default behaviour if needed. Use only if necessary.'/>

package/examples/pages/components/Popover.tsx

@@ -35,7 +35,6 @@ export class PopoverDoc extends React.Component {
                                     triggerSelector="#button-view-content"
                                     title="Popover test"
                                     placement="top-end"
-                                    zIndex={999}
                                 >
                                     Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur.
                                 </Popover>
@@ -49,7 +48,6 @@ export class PopoverDoc extends React.Component {
                             triggerSelector="#button-view-content"
                             title="Popover test"
                             placement="top-end"
-                            zIndex={999}
                         >
                             Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur.
                         </Popover>
@@ -65,7 +63,6 @@ export class PopoverDoc extends React.Component {
                     <Prop name='placement' isRequired={false}
                           type='auto | auto-end | auto-start | bottom | bottom-end | bottom-start | left | left-end | left-start | right | right-end | right-start | top | top-end | top-start' 
                           default='auto' description='Define the placement of the Popover.' />
-                    <Prop name='zIndex' isRequired={false} type='number' default='null' description='Defines the z-index of the Popover.' />
                 </PropsList>
             </section>
         )

package/examples/pages/components/SubNav.tsx

@@ -9,7 +9,7 @@ export default class SubNavDoc extends React.Component {
                 <h2 className='docs-page__h2'>Sub Navigation bar</h2>
                 <p></p>
                 <Markup.ReactMarkupCodePreview>{`
-                    <SubNav zIndex={2}>
+                    <SubNav>
                         <ButtonGroup align='start'>
                             <NavButton icon='search' onClick={()=> false} />
                         </ButtonGroup>
@@ -22,7 +22,7 @@ export default class SubNavDoc extends React.Component {
 
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
-                        <SubNav zIndex={4}>
+                        <SubNav>
                             <ButtonGroup align='start'>
                                 <NavButton icon='search' onClick={()=> false} />
                             </ButtonGroup>
@@ -30,7 +30,7 @@ export default class SubNavDoc extends React.Component {
                                 <NavButton icon='expand-thin' type='highlight' onClick={()=> false} />
                             </ButtonGroup>
                         </SubNav>
-                        <SubNav color='darker' zIndex={3}>
+                        <SubNav color='darker'>
                             <ButtonGroup align='start'>
                                 <NavButton icon='filter-large' type='darker' onClick={()=> false} />
                             </ButtonGroup>
@@ -48,7 +48,7 @@ export default class SubNavDoc extends React.Component {
                             </ButtonGroup>
                         </SubNav>
                         <br />
-                        <SubNav color='darker' zIndex={2}>
+                        <SubNav color='darker'>
                             <ButtonGroup align='start' padded={true}>
                             <Button text='Something' onClick={()=> false} />
                                 <Button text='Else' onClick={()=> false} />
@@ -58,7 +58,7 @@ export default class SubNavDoc extends React.Component {
                             </ButtonGroup>
                         </SubNav>
                         <br />
-                        <SubNav color='blueGreyDarker' zIndex={1}>
+                        <SubNav color='blueGreyDarker'>
                             <ButtonGroup align='center'>
                             <Button text='One' onClick={()=> false} />
                                 <Button text='Two' onClick={()=> false} />
@@ -72,7 +72,7 @@ export default class SubNavDoc extends React.Component {
                         </SubNav>
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
-                        <SubNav zIndex={4}>
+                        <SubNav>
                             <ButtonGroup align='start'>
                                 <NavButton icon='search' onClick={()=> false} />
                             </ButtonGroup>
@@ -80,7 +80,7 @@ export default class SubNavDoc extends React.Component {
                                 <NavButton icon='expand-thin' type='highlight' onClick={()=> false} />
                             </ButtonGroup>
                         </SubNav>
-                        <SubNav color='darker' zIndex={3}>
+                        <SubNav color='darker'>
                             <ButtonGroup align='start'>
                                 <NavButton icon='filter-large' type='darker' onClick={()=> false} />
                             </ButtonGroup>
@@ -100,7 +100,7 @@ export default class SubNavDoc extends React.Component {
 
                         <br />
 
-                        <SubNav color='darker' zIndex={2}>
+                        <SubNav color='darker'>
                             <ButtonGroup align='start' padded={true}>
                             <Button text='Something' onClick={()=> false} />
                                 <Button text='Else' onClick={()=> false} />
@@ -112,7 +112,7 @@ export default class SubNavDoc extends React.Component {
                         
                         <br />
 
-                        <SubNav color='blueGreyDarker' zIndex={1}>
+                        <SubNav color='blueGreyDarker'>
                             <ButtonGroup align='center'>
                             <Button text='One' onClick={()=> false} />
                                 <Button text='Two' onClick={()=> false} />
@@ -132,7 +132,6 @@ export default class SubNavDoc extends React.Component {
                 <PropsList>
                     <Prop name='color' isRequired={false} type='light | darker | blueGrey | blueGreyDarker' default='light' description='Background colour of the SubNav component.'/>
                     <Prop name='theme' isRequired={false} type='light | dark' default='/' description='Choose the UI theme. It will inherit the default theme if not set. All child elements will inherit the theme of the SubNav if it is set.'/>
-                    <Prop name='zIndex' isRequired={true} type='number' default='1000' description='Increase the default z-index value (1000) by the specified amount.'/>
                     <Prop name='className' isRequired={false} type='string' default='/' description='Add helper classes or custom CSS styles.'/>
                 </PropsList>
             </section>

package/examples/pages/components/TableList.tsx

@@ -23,7 +23,7 @@ export default class TableListDoc extends React.Component<IProps, IState> {
                     </>,
                     center: <span>Item 1</span>,
                     end: <IconLabel style='translucent' text='Label success' type='success' icon='time' />,
-                    action: <Dropdown append={true} items={[
+                    action: <Dropdown items={[
                         { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => 1 },
                         { label: <Label style='translucent' text='prlg' />, onSelect: () => 1 },
                         { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },

package/examples/pages/design-patterns/ThreePaneLayoutPattern.tsx

@@ -77,7 +77,7 @@ class ThreePaneLayoutPattern extends React.Component<IProps, IState> {
                         <div style={{height: 600,}} className='sd-border--light'>
                             <Layout.PageLayout fullHeight={true}
                                 header={(
-                                    <SubNav zIndex={2}>
+                                    <SubNav>
                                         <ButtonGroup align="inline">
                                             <Tooltip text='Click to toggle left panel' flow='right'>
                                                 <NavButton 
@@ -212,7 +212,7 @@ class ThreePaneLayoutPattern extends React.Component<IProps, IState> {
                     <Markup.ReactMarkupCode>{`
                         <Layout.PageLayout
                             header={(
-                                <SubNav zIndex={2}>
+                                <SubNav>
                                     <ButtonGroup align="inline">
                                         <Tooltip text='Click to toggle left panel' flow='right'>
                                             <NavButton 
@@ -359,4 +359,4 @@ class ThreePaneLayoutPattern extends React.Component<IProps, IState> {
     }
 }
 
-export { ThreePaneLayoutPattern };
+export { ThreePaneLayoutPattern };

package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx

@@ -296,7 +296,7 @@ export class CoreLayout extends React.Component<IProps, IState> {
                 {!this.state.fullEditor && !this.state.rightPanel
                     && <Layout.LayoutContainer>
                         <Layout.HeaderPanel>
-                            <SubNav zIndex={2}>
+                            <SubNav>
                                 <SearchBar placeholder='Search media'></SearchBar>
                                 <ButtonGroup align='end' spaces='no-space'>
                                     <Dropdown
@@ -346,7 +346,7 @@ export class CoreLayout extends React.Component<IProps, IState> {
                                     </Dropdown>
                                 </ButtonGroup>
                             </SubNav>
-                            <SubNav zIndex={1}>
+                            <SubNav>
                                 <ButtonGroup align='start'>
                                     <NavButton icon='filter-large' onClick={this.handleFilter} />
                                 </ButtonGroup>
@@ -585,7 +585,6 @@ export class CoreLayout extends React.Component<IProps, IState> {
                                         <Layout.Container className='sd-margin-s--auto sd-flex--items-center'>
                                             {/* <Dropdown
                                                 align = 'right'
-                                                append = {true}
                                                 items={[
                                                     {
                                                         type: 'group', label: 'Actions', items: [

package/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx

@@ -68,7 +68,7 @@ export class EditorTest extends React.Component<IProps, IState> {
         return (
             <Layout.AuthoringFrame
                 header={(
-                    <SubNav zIndex={2}>
+                    <SubNav>
                         <ButtonGroup align='end'>
                             <Button
                                 text="Open pinned"

package/examples/pages/playgrounds/react-playgrounds/Multiedit.tsx

@@ -84,7 +84,6 @@ export class Multiedit extends React.Component<IProps, IState> {
                     }}
                 >
                     <Dropdown
-                        append
                         items={[
                             { label: 'Action 1', onSelect: () => this.setState({arr: [...this.state.arr, <Editor />]}) },
                         ]}
@@ -116,7 +115,7 @@ export class Editor extends React.Component<{}, IEditor> {
         <div style={{borderRight: '4px solid grey'}}>
             <Layout.AuthoringFrame
                 header={(
-                    <SubNav zIndex={2}>
+                    <SubNav>
                         <ButtonGroup align='end'>
                             <ButtonGroup subgroup={true} spaces="no-space">
                                 <Tooltip text='More actions' flow='left'>

package/examples/pages/playgrounds/react-playgrounds/PageLayoutTest.tsx

@@ -56,7 +56,7 @@ export class PageLayoutTest extends React.Component<IProps, IState> {
         return (
             <Layout.PageLayout
             header={(
-                <SubNav zIndex={2}>
+                <SubNav>
                     <ButtonGroup align="start" padded={true}>
                         <Button
                             text="Open left panel"

package/examples/pages/playgrounds/react-playgrounds/PersonalProfile.tsx

@@ -123,7 +123,7 @@ export class PersonalProfile extends React.Component<IProps, IState> {
             <Components.Layout header='My Profile' theme={this.state.theme}>
                 <Components.LayoutContainer>
                     <Components.HeaderPanel>
-                        <SubNav zIndex={2}>
+                        <SubNav>
                             <ButtonGroup align='start' spaces='no-space'>
                                 <Tooltip text='User list' flow='right'>
                                     <NavButton icon='arrow-left' onClick={() => false} />
@@ -135,7 +135,7 @@ export class PersonalProfile extends React.Component<IProps, IState> {
                             </AvatarWrapper>
                             <h2 className='subnav__page-title'>Jeffrey Lebowski</h2>
                         </SubNav>
-                        <SubNav zIndex={1}>
+                        <SubNav>
                             <SubNavDivider width='small' />
                             <Tabs onClick={this.handleClick}>
                                 <TabLabel label='Overview' indexValue={0}/>

package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx

@@ -176,7 +176,7 @@ export class Rundowns extends React.Component<IProps, IState> {
 
                     <Layout.LayoutContainer>
                         <Layout.HeaderPanel>
-                            <SubNav zIndex={2}>
+                            <SubNav>
                                 <SearchBar placeholder='Search media'></SearchBar>
                                 <ButtonGroup align='end' spaces='no-space'>
                                     <Dropdown
@@ -227,7 +227,7 @@ export class Rundowns extends React.Component<IProps, IState> {
                                     </Dropdown>
                                 </ButtonGroup>
                             </SubNav>
-                            <SubNav zIndex={1}>
+                            <SubNav>
                                 <ButtonGroup align='start'>
                                     <NavButton icon='filter-large' onClick={this.handleFilter} />
                                 </ButtonGroup>
@@ -503,7 +503,6 @@ export class Rundowns extends React.Component<IProps, IState> {
                                         <Container className='sd-margin-s--auto sd-flex--items-center'>
                                             {/* <Dropdown
                                                 align = 'right'
-                                                append = {true}
                                                 items={[
                                                     {
                                                         type: 'group', label: 'Actions', items: [
@@ -588,7 +587,6 @@ export class Rundowns extends React.Component<IProps, IState> {
                 <Modal
                     headerTemplate="Manage Templates"
                     visible={this.state.modalManageTemplate}
-                    zIndex={1000}
                     contentBg='medium'
                     contentPadding='none'
                     size='x-large' onHide={() => {this.setState({modalManageTemplate: false})}}
@@ -691,7 +689,6 @@ export class Rundowns extends React.Component<IProps, IState> {
                 <Modal
                     headerTemplate="Create new Show"
                     visible={this.state.modalNewShow}
-                    zIndex={1000}
                     footerTemplate={newShowFooter}
                     contentBg='medium'
                     size='medium' onHide={() => {this.setState({modalNewShow: false})}}
@@ -723,7 +720,6 @@ export class Rundowns extends React.Component<IProps, IState> {
                 <Modal
                     headerTemplate="Create new Show"
                     visible={this.state.modalNewShowSuccess}
-                    zIndex={1000}
                     footerTemplate={newShowFooter2}
                     contentBg='medium'
                     size='medium' onHide={() => {this.setState({modalNewShowSuccess: false})}}
@@ -740,7 +736,6 @@ export class Rundowns extends React.Component<IProps, IState> {
                 {/* New Template Modal */}
                 <Modal headerTemplate="Create new Template"
                     visible={this.state.modalNewTemplate}
-                    zIndex={1000}
                     contentBg='medium'
                     contentPadding='none'
                     size='x-large' onHide={() => {this.setState({modalNewTemplate: false})}}
@@ -866,14 +861,13 @@ export class Rundowns extends React.Component<IProps, IState> {
                     headerTemplate="Manage Shows"
                     maximizable
                     visible={this.state.modalManageShow}
-                    zIndex={1000}
                     contentBg='medium'
                     contentPadding='none'
                     size='x-large' onHide={() => {this.setState({modalManageShow: false})}}
                 >
                     <Layout.LayoutContainer>
                         <Layout.HeaderPanel>
-                            <SubNav zIndex={2}>
+                            <SubNav>
                                 <SearchBar placeholder='Search shows'></SearchBar>
                                 <ButtonGroup align='end' spaces='no-space'>
                                     <CreateButton ariaValue='New show' onClick={() => false} />
@@ -962,7 +956,6 @@ export class Rundowns extends React.Component<IProps, IState> {
                                         <Container className='sd-margin-s--auto sd-flex--items-center'>
                                             <Dropdown
                                                 align = 'right'
-                                                append = {true}
                                                 items={[
                                                     {
                                                         type: 'group', label: 'Actions', items: [

package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx

@@ -83,7 +83,7 @@ export class SamsPlayground extends React.Component<IProps, IState> {
 
                 <Components.LayoutContainer>
                     <Components.HeaderPanel>
-                        <SubNav zIndex={2}>
+                        <SubNav>
                             <ButtonGroup align='inline'>
                                 <Dropdown
                                     items={[
@@ -107,7 +107,7 @@ export class SamsPlayground extends React.Component<IProps, IState> {
                                 <NavButton icon='dots-vertical' onClick={() => false} />
                             </ButtonGroup>
                         </SubNav>
-                        <SubNav zIndex={1}>
+                        <SubNav>
                             <ButtonGroup align='inline'>
                                 <NavButton icon='filter-large' onClick={this.handleFilter} />
                             </ButtonGroup>
@@ -270,7 +270,6 @@ export class SamsPlayground extends React.Component<IProps, IState> {
                                     <div className="side-panel__content-block-inner side-panel__content-block-inner--right">
                                         <Dropdown
                                             align = 'right'
-                                            append = {true}
                                             items={[
                                                 {
                                                     type: 'group', label: 'Actions', items: [

package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx

@@ -1008,7 +1008,6 @@ export class TestGround extends React.Component<IProps, IState> {
                          {/* Event Only (This one existed Before) */}
                         <Modal 
                             headerTemplate="Save Event"
-                            zIndex={10000}
                             visible={this.state.modalSaveEvent}
                             contentPadding='medium'
                             contentBg='medium'
@@ -1059,7 +1058,6 @@ export class TestGround extends React.Component<IProps, IState> {
                         {/* Event and Planning */}
                         <Modal 
                             headerTemplate="Save Event"
-                            zIndex={10000}
                             visible={this.state.modalSaveEvent2}
                             contentPadding='medium'
                             contentBg='medium'
@@ -1158,7 +1156,6 @@ export class TestGround extends React.Component<IProps, IState> {
                         {/* Planning only */}
                         <Modal 
                             headerTemplate="Save Event"
-                            zIndex={10000}
                             visible={this.state.modalSaveEvent3}
                             contentPadding='medium'
                             contentBg='medium'
@@ -1266,7 +1263,6 @@ export class TestGround extends React.Component<IProps, IState> {
 
                         {/* Planning templates modal */}
                         <Modal headerTemplate="Planning templates"
-                            zIndex={10000}
                             visible={this.state.modalPlanningTemplates}
                             contentPadding='medium'
                             contentBg='medium'

package/examples/pages/playgrounds/react-playgrounds/UiPlayground.tsx

@@ -83,7 +83,7 @@ export class UiPlayground extends React.Component<IProps, IState> {
 
                 <Components.LayoutContainer>
                     <Components.HeaderPanel>
-                        <SubNav zIndex={2}>
+                        <SubNav>
                             <ButtonGroup align='inline'>
                                 <Dropdown
                                     items={[
@@ -107,7 +107,7 @@ export class UiPlayground extends React.Component<IProps, IState> {
                                 <NavButton icon='dots-vertical' onClick={() => false} />
                             </ButtonGroup>
                         </SubNav>
-                        <SubNav zIndex={1}>
+                        <SubNav>
                             <ButtonGroup align='inline'>
                                 <NavButton icon='filter-large' onClick={this.handleFilter} />
                             </ButtonGroup>
@@ -269,7 +269,6 @@ export class UiPlayground extends React.Component<IProps, IState> {
                                     <div className="side-panel__content-block-inner side-panel__content-block-inner--right">
                                         <Dropdown
                                             align = 'right'
-                                            append = {true}
                                             items={[
                                                 {
                                                     type: 'group', label: 'Actions', items: [

package/package.json

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

package/react/components/Dropdown.d.ts

@@ -22,11 +22,9 @@ 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;
 }
-export declare const Dropdown: ({ items, header, footer, children, append, align, zIndex, onChange, maxHeight, }: IMenu) => JSX.Element;
+export declare const Dropdown: ({ items, header, footer, children, align, onChange, maxHeight, }: IMenu) => JSX.Element;
 export {};

package/react/components/Dropdown.js

@@ -39,11 +39,16 @@ var React = __importStar(require("react"));
 var ReactDOM = __importStar(require("react-dom"));
 var core_1 = require("@popperjs/core");
 var react_id_generator_1 = require("react-id-generator");
+var zIndex_1 = require("./../zIndex");
 var DROPDOWN_ID_CONTAINER = "sd-dropdown-constainer";
 var Dropdown = function (_a) {
-    var items = _a.items, header = _a.header, footer = _a.footer, children = _a.children, append = _a.append, align = _a.align, zIndex = _a.zIndex, onChange = _a.onChange, maxHeight = _a.maxHeight;
-    var _b = React.useState(false), open = _b[0], setOpen = _b[1];
-    var _c = React.useState(false), change = _c[0], setChange = _c[1];
+    var items = _a.items, header = _a.header, footer = _a.footer, children = _a.children, align = _a.align, onChange = _a.onChange, maxHeight = _a.maxHeight;
+    var _b = React.useState(-1), zIndex = _b[0], setZIndex = _b[1];
+    if (zIndex === -1) {
+        setZIndex((0, zIndex_1.getNextZIndex)());
+    }
+    var _c = React.useState(false), open = _c[0], setOpen = _c[1];
+    var _d = React.useState(false), change = _d[0], setChange = _d[1];
     var menuID = (0, react_id_generator_1.useId)()[0];
     var ref = React.useRef(null);
     var buttonRef = React.useRef(null);
@@ -71,7 +76,7 @@ var Dropdown = function (_a) {
         }
     }, [change]);
     React.useLayoutEffect(function () {
-        if (append && change) {
+        if (change) {
             addInPlaceholder();
         }
         setChange(true);
@@ -101,28 +106,17 @@ var Dropdown = function (_a) {
         if (!open) {
             var menuRef_1;
             setOpen(true);
-            if (!append) {
+            setTimeout(function () {
                 menuRef_1 = ref.current;
                 var toggleRef = buttonRef.current;
                 if (toggleRef && menuRef_1) {
                     (0, core_1.createPopper)(toggleRef, menuRef_1, {
                         placement: checkAlign() ? 'bottom-end' : 'bottom-start',
+                        strategy: 'fixed',
                     });
+                    menuRef_1.style.display = 'block';
                 }
-            }
-            else {
-                setTimeout(function () {
-                    menuRef_1 = ref.current;
-                    var toggleRef = buttonRef.current;
-                    if (toggleRef && menuRef_1) {
-                        (0, core_1.createPopper)(toggleRef, menuRef_1, {
-                            placement: checkAlign() ? 'bottom-end' : 'bottom-start',
-                            strategy: 'fixed',
-                        });
-                        menuRef_1.style.display = 'block';
-                    }
-                }, 0);
-            }
+            }, 0);
             document.addEventListener('click', closeMenu);
             setTimeout(function () {
                 menuRef_1.getElementsByTagName('button')[0].focus();
@@ -181,47 +175,24 @@ var Dropdown = function (_a) {
             return (React.createElement(DropdownItem, { key: index, label: item['label'], icon: item['icon'], active: item['active'], onSelect: item['onSelect'], onChange: onChange }));
         }
     }
-    return (React.createElement("div", { className: 'dropdown ' + (open ? 'open' : '') },
-        typeof children === 'object' ?
-            (React.isValidElement(children) ?
-                React.createElement("div", { ref: buttonRef, style: { display: 'content' } }, (function () {
-                    var 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);
-                })()) : null)
-            :
-                React.createElement("button", { style: { whiteSpace: 'nowrap' }, ref: buttonRef, className: ' dropdown__toggle dropdown-toggle', "aria-haspopup": "menu", tabIndex: 0, "aria-expanded": open, onClick: toggleDisplay },
-                    children,
-                    React.createElement("span", { className: "dropdown__caret" })),
-        append ?
-            null : (function () {
-            if (header && footer) {
-                return (React.createElement("div", { className: 'dropdown__menu dropdown__menu--has-head-foot', role: 'menu', ref: ref, style: { zIndex: zIndex } },
-                    React.createElement("ul", { className: 'dropdown__menu-header' }, headerElements),
-                    React.createElement("ul", { className: 'dropdown__menu-body' }, dropdownElements),
-                    React.createElement("ul", { className: 'dropdown__menu-footer dropdown__menu-footer--has-list ' }, footerElements)));
-            }
-            else if (header) {
-                return (React.createElement("div", { className: 'dropdown__menu dropdown__menu--has-head-foot', role: 'menu', ref: ref, style: { zIndex: zIndex } },
-                    React.createElement("ul", { className: 'dropdown__menu-header' }, headerElements),
-                    React.createElement("ul", { className: 'dropdown__menu-body' }, dropdownElements)));
-            }
-            else if (footer) {
-                return (React.createElement("div", { className: 'dropdown__menu dropdown__menu--has-head-foot', role: 'menu', ref: ref, style: { zIndex: zIndex } },
-                    React.createElement("ul", { className: 'dropdown__menu-body' }, dropdownElements),
-                    React.createElement("ul", { className: 'dropdown__menu-footer dropdown__menu-footer--has-list ' }, footerElements)));
-            }
-            else {
-                return (React.createElement("ul", { className: 'dropdown__menu', role: 'menu', ref: ref, style: { zIndex: zIndex } }, dropdownElements));
-            }
-        })()));
+    return (React.createElement("div", { className: 'dropdown ' + (open ? 'open' : '') }, typeof children === 'object'
+        ? (React.isValidElement(children)
+            ? React.createElement("div", { ref: buttonRef, style: { display: 'content' } }, (function () {
+                var 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);
+            })())
+            : null)
+        : React.createElement("button", { style: { whiteSpace: 'nowrap' }, ref: buttonRef, className: ' dropdown__toggle dropdown-toggle', "aria-haspopup": "menu", tabIndex: 0, "aria-expanded": open, onClick: toggleDisplay },
+            children,
+            React.createElement("span", { className: "dropdown__caret" }))));
 };
 exports.Dropdown = Dropdown;
 var DropdownItem = function (_a) {

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