flexlayout-react 0.5.18 → 0.6.0

package/src/view/TabButton.tsx

@@ -4,36 +4,47 @@ import Actions from "../model/Actions";
 import TabNode from "../model/TabNode";
 import TabSetNode from "../model/TabSetNode";
 import Rect from "../Rect";
-import { IIcons, ILayoutCallbacks, ITitleObject } from "./Layout";
+import { IIcons, ILayoutCallbacks } from "./Layout";
 import { ICloseType } from "../model/ICloseType";
 import { CLASSES } from "../Types";
+import { getRenderStateEx, isAuxMouseEvent } from "./Utils";
 
 /** @hidden @internal */
 export interface ITabButtonProps {
     layout: ILayoutCallbacks;
     node: TabNode;
-    show: boolean;
     selected: boolean;
     height: number;
     iconFactory?: (node: TabNode) => React.ReactNode | undefined;
     titleFactory?: (node: TabNode) => React.ReactNode | undefined;
     icons?: IIcons;
+    path: string;
 }
 
 /** @hidden @internal */
 export const TabButton = (props: ITabButtonProps) => {
-    const { layout, node, show, selected, iconFactory, titleFactory, icons } = props;
+    const { layout, node, selected, iconFactory, titleFactory, icons, path } = props;
     const selfRef = React.useRef<HTMLDivElement | null>(null);
     const contentRef = React.useRef<HTMLInputElement | null>(null);
     const contentWidth = React.useRef<number>(0);
 
     const onMouseDown = (event: React.MouseEvent<HTMLDivElement, MouseEvent> | React.TouchEvent<HTMLDivElement>) => {
-        if (!layout.getEditingTab()) {
-            const message = layout.i18nName(I18nLabel.Move_Tab, node.getName());
-            layout.dragStart(event, message, node, node.isEnableDrag(), onClick, onDoubleClick);
+
+        if (!isAuxMouseEvent(event) && !layout.getEditingTab()) {
+            layout.dragStart(event, undefined, node, node.isEnableDrag(), onClick, onDoubleClick);
         }
     };
 
+    const onAuxMouseClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+        if (isAuxMouseEvent(event)) {
+            layout.auxMouseClick(node, event);
+        }
+    };
+
+    const onContextMenu = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+        layout.showContextMenu(node, event);
+    };
+
     const onClick = () => {
         layout.doAction(Actions.selectTab(node.getId()));
     };
@@ -43,7 +54,7 @@ export const TabButton = (props: ITabButtonProps) => {
             layout.setEditingTab(node);
             layout.getCurrentDocument()!.body.addEventListener("mousedown", onEndEdit);
             layout.getCurrentDocument()!.body.addEventListener("touchstart", onEndEdit);
-        } 
+        }
         // else {
         //     const parentNode = node.getParent() as TabSetNode;
         //     if (parentNode.canMaximize()) {
@@ -98,7 +109,7 @@ export const TabButton = (props: ITabButtonProps) => {
         const layoutRect = layout.getDomRect();
         const r = selfRef.current!.getBoundingClientRect();
         node._setTabRect(new Rect(r.left - layoutRect.left, r.top - layoutRect.top, r.width, r.height));
-        contentWidth.current = contentRef.current!.getBoundingClientRect().width;
+        contentWidth.current = selfRef.current!.getBoundingClientRect().width;
     };
 
     const onTextBoxMouseDown = (event: React.MouseEvent<HTMLInputElement> | React.TouchEvent<HTMLInputElement>) => {
@@ -135,55 +146,24 @@ export const TabButton = (props: ITabButtonProps) => {
         classNames += " " + node.getClassName();
     }
 
-    let leadingContent = iconFactory ? iconFactory(node) : undefined;
-    let titleContent: React.ReactNode = node.getName();
-    let name = node.getName();
-
-    function isTitleObject(obj: any): obj is ITitleObject {
-        return obj.titleContent !== undefined 
-      }
-
-    if (titleFactory !== undefined) {
-        const titleObj = titleFactory(node);
-        if (titleObj !== undefined) {
-            if (typeof titleObj === "string") {
-                titleContent = titleObj as string;
-                name = titleObj as string;
-            } else if (isTitleObject(titleObj)) {
-                titleContent = titleObj.titleContent;
-                name = titleObj.name;
-            } else {
-                titleContent = titleObj;
-            }
-        }
-    }
-
-    if (typeof leadingContent === undefined && typeof node.getIcon() !== undefined) {
-        leadingContent = <img src={node.getIcon()} alt="leadingContent" />;
-    }
-
-    let buttons: any[] = [];
-
-    // allow customization of leading contents (icon) and contents
-    const renderState = { leading: leadingContent, content: titleContent, name, buttons };
-    layout.customizeTab(node, renderState);
+    const renderState = getRenderStateEx(layout, node, iconFactory, titleFactory);
 
-    node._setRenderedName(renderState.name);
-
-    let content = (
-        <div ref={contentRef} className={cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_CONTENT)}>
+    let content = renderState.content ? (
+        <div className={cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_CONTENT)}>
             {renderState.content}
-        </div>
-    );
-    const leading = <div className={cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_LEADING)}>{renderState.leading}</div>;
+        </div>) : null;
+
+    const leading = renderState.leading ? (
+        <div className={cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_LEADING)}>
+                {renderState.leading}
+        </div>) : null;
 
     if (layout.getEditingTab() === node) {
-        const contentStyle = { width: contentWidth + "px" };
         content = (
             <input
-                style={contentStyle}
                 ref={contentRef}
                 className={cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_TEXTBOX)}
+                data-layout-path={path + "/textbox"}
                 type="text"
                 autoFocus={true}
                 defaultValue={node.getName()}
@@ -196,8 +176,14 @@ export const TabButton = (props: ITabButtonProps) => {
 
     if (node.isEnableClose()) {
         const closeTitle = layout.i18nName(I18nLabel.Close_Tab);
-        buttons.push(
-            <div key="close" title={closeTitle} className={cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_TRAILING)} onMouseDown={onCloseMouseDown} onClick={onClose} onTouchStart={onCloseMouseDown}>
+        renderState.buttons.push(
+            <div
+                key="close"
+                data-layout-path={path + "/button/close"}
+                title={closeTitle}
+                className={cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_TRAILING)}
+                onMouseDown={onCloseMouseDown} onClick={onClose}
+                onTouchStart={onCloseMouseDown}>
                 {icons?.close}
             </div>
         );
@@ -206,17 +192,18 @@ export const TabButton = (props: ITabButtonProps) => {
     return (
         <div
             ref={selfRef}
-            style={{
-                visibility: show ? "visible" : "hidden",
-            }}
+            data-layout-path={path}
             className={classNames}
             onMouseDown={onMouseDown}
+            onClick={onAuxMouseClick}
+            onAuxClick={onAuxMouseClick}
+            onContextMenu={onContextMenu}
             onTouchStart={onMouseDown}
             title={node.getHelpText()}
         >
             {leading}
             {content}
-            {buttons}
+            {renderState.buttons}
         </div>
     );
 };

package/src/view/TabButtonStamp.tsx

@@ -0,0 +1,47 @@
+import * as React from "react";
+import TabNode from "../model/TabNode";
+import { ILayoutCallbacks } from "./Layout";
+import { CLASSES } from "../Types";
+import { getRenderStateEx } from "./Utils";
+
+/** @hidden @internal */
+export interface ITabButtonStampProps {
+    node: TabNode;
+    layout: ILayoutCallbacks;
+    iconFactory?: (node: TabNode) => React.ReactNode | undefined;
+    titleFactory?: (node: TabNode) => React.ReactNode | undefined;
+}
+
+/** @hidden @internal */
+export const TabButtonStamp = (props: ITabButtonStampProps) => {
+    const { layout, node, iconFactory, titleFactory } = props;
+    const selfRef = React.useRef<HTMLDivElement | null>(null);
+
+    const cm = layout.getClassName;
+
+    let classNames = cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_STAMP);
+
+    const renderState = getRenderStateEx(layout, node, iconFactory, titleFactory);
+
+    let content = renderState.content ? (
+        <div className={cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_CONTENT)}>
+            {renderState.content}
+        </div>)
+        : node._getNameForOverflowMenu();
+
+    const leading = renderState.leading ? (
+        <div className={cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_LEADING)}>
+            {renderState.leading}
+        </div>) : null;
+
+    return (
+        <div
+            ref={selfRef}
+            className={classNames}
+            title={node.getHelpText()}
+        >
+            {leading}
+            {content}
+        </div>
+    );
+};

package/src/view/TabFloating.tsx

@@ -5,17 +5,29 @@ import TabSetNode from "../model/TabSetNode";
 import { CLASSES } from "../Types";
 import { ILayoutCallbacks } from "./Layout";
 import { I18nLabel } from "../I18nLabel";
+import { hideElement } from "./Utils";
 
 /** @hidden @internal */
 export interface ITabFloatingProps {
     layout: ILayoutCallbacks;
     selected: boolean;
     node: TabNode;
+    path: string;
 }
 
 /** @hidden @internal */
 export const TabFloating = (props: ITabFloatingProps) => {
-    const { layout, selected, node } = props;
+    const { layout, selected, node, path } = props;
+
+    const showPopout = () => {
+        if (node.getWindow()) {
+            node.getWindow()!.focus();
+        }
+    }
+
+    const dockPopout = () => {
+        layout.doAction(Actions.unFloatTab(node.getId()));
+    }
 
     const onMouseDown = () => {
         const parent = node.getParent() as TabSetNode;
@@ -28,41 +40,53 @@ export const TabFloating = (props: ITabFloatingProps) => {
 
     const onClickFocus = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
         event.preventDefault();
-        if (node.getWindow()) {
-            node.getWindow()!.focus();
-        }
+        showPopout();
     };
 
     const onClickDock = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
         event.preventDefault();
-        layout.doAction(Actions.unFloatTab(node.getId()));
+        dockPopout();
     };
 
     const cm = layout.getClassName;
 
-    const style: Record<string, any> = node._styleWithPosition({
-        display: selected ? "flex" : "none",
-    });
+    const style: Record<string, any> = node._styleWithPosition();
+    if (!selected) {
+        hideElement(style, node.getModel().isUseVisibility());
+    }
 
     const message = layout.i18nName(I18nLabel.Floating_Window_Message);
     const showMessage = layout.i18nName(I18nLabel.Floating_Window_Show_Window);
     const dockMessage = layout.i18nName(I18nLabel.Floating_Window_Dock_Window);
 
-    return (
-        <div className={cm(CLASSES.FLEXLAYOUT__TAB_FLOATING)} onMouseDown={onMouseDown} onTouchStart={onMouseDown} style={style}>
-            <div className={cm(CLASSES.FLEXLAYOUT__TAB_FLOATING_INNER)}>
-                <div>{message}</div>
-                <div>
-                    <a href="#" onClick={onClickFocus}>
-                        {showMessage}
-                    </a>
-                </div>
-                <div>
-                    <a href="#" onClick={onClickDock}>
-                        {dockMessage}
-                    </a>
+    const customRenderCallback = layout.getOnRenderFloatingTabPlaceholder();
+    if (customRenderCallback) {
+        return (
+            <div className={cm(CLASSES.FLEXLAYOUT__TAB_FLOATING)} onMouseDown={onMouseDown} onTouchStart={onMouseDown} style={style}>
+                {customRenderCallback(dockPopout, showPopout)}
+            </div>
+        );
+    } else {
+        return (
+            <div className={cm(CLASSES.FLEXLAYOUT__TAB_FLOATING)}
+                data-layout-path={path}
+                onMouseDown={onMouseDown}
+                onTouchStart={onMouseDown}
+                style={style}>
+                <div className={cm(CLASSES.FLEXLAYOUT__TAB_FLOATING_INNER)}>
+                    <div>{message}</div>
+                    <div>
+                        <a href="#" onClick={onClickFocus}>
+                            {showMessage}
+                        </a>
+                    </div>
+                    <div>
+                        <a href="#" onClick={onClickDock}>
+                            {dockMessage}
+                        </a>
+                    </div>
                 </div>
             </div>
-        </div>
-    );
+        );
+    }
 };

package/src/view/TabOverflowHook.tsx

@@ -92,7 +92,7 @@ export const useTabOverflow = (
                     return; // nothing to do all tabs are shown in available space
                 }
 
-                endPos -= hiddenTabs.length > 0 ? (orientation === Orientation.HORZ ? 10 : 0) : 45; // will need hidden tabs
+                endPos -= hiddenTabs.length > 0 ? (orientation === Orientation.HORZ ? 16 : 0) : 45; // will need hidden tabs
 
                 let shiftPos = 0;
 

package/src/view/TabSet.tsx

@@ -9,6 +9,7 @@ import { TabButton } from "./TabButton";
 import { useTabOverflow } from "./TabOverflowHook";
 import Orientation from "../Orientation";
 import { CLASSES } from "../Types";
+import { hideElement, isAuxMouseEvent } from "./Utils";
 
 /** @hidden @internal */
 export interface ITabSetProps {
@@ -17,12 +18,13 @@ export interface ITabSetProps {
     iconFactory?: (node: TabNode) => React.ReactNode | undefined;
     titleFactory?: (node: TabNode) => React.ReactNode | undefined;
     icons?: IIcons;
-    editingTab?: TabNode; 
+    editingTab?: TabNode;
+    path?: string;
 }
 
 /** @hidden @internal */
 export const TabSet = (props: ITabSetProps) => {
-    const { node, layout, iconFactory, titleFactory, icons } = props;
+    const { node, layout, iconFactory, titleFactory, icons, path } = props;
 
     const toolbarRef = React.useRef<HTMLDivElement | null>(null);
     const overflowbuttonRef = React.useRef<HTMLButtonElement | null>(null);
@@ -31,9 +33,17 @@ export const TabSet = (props: ITabSetProps) => {
 
     const { selfRef, position, userControlledLeft, hiddenTabs, onMouseWheel, tabsTruncated } = useTabOverflow(node, Orientation.HORZ, toolbarRef, stickyButtonsRef);
 
-    const onOverflowClick = () => {
+    const onOverflowClick = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
         const element = overflowbuttonRef.current!;
-        showPopup(layout.getRootDiv(), element, hiddenTabs, onOverflowItemSelect, layout.getClassName);
+        showPopup(
+            element, 
+            hiddenTabs, 
+            onOverflowItemSelect, 
+            layout,
+            iconFactory,
+            titleFactory,
+            );
+        event.stopPropagation();
     };
 
     const onOverflowItemSelect = (item: { node: TabNode; index: number }) => {
@@ -42,37 +52,52 @@ export const TabSet = (props: ITabSetProps) => {
     };
 
     const onMouseDown = (event: React.MouseEvent<HTMLDivElement, MouseEvent> | React.TouchEvent<HTMLDivElement>) => {
-        let name = node.getName();
-        if (name === undefined) {
-            name = "";
-        } else {
-            name = ": " + name;
+        if (!isAuxMouseEvent(event)) {
+            let name = node.getName();
+            if (name === undefined) {
+                name = "";
+            } else {
+                name = ": " + name;
+            }
+            layout.doAction(Actions.setActiveTabset(node.getId()));
+            if (!layout.getEditingTab()) {
+                const message = layout.i18nName(I18nLabel.Move_Tabset, name);
+                layout.dragStart(event, message, node, node.isEnableDrag(), (event2: Event) => undefined, onDoubleClick);
+            }
         }
-        layout.doAction(Actions.setActiveTabset(node.getId()));
-        if (!layout.getEditingTab()) {
-            const message = layout.i18nName(I18nLabel.Move_Tabset, name);
-            layout.dragStart(event, message, node, node.isEnableDrag(), (event2: Event) => undefined, onDoubleClick);
+    };
+
+    const onAuxMouseClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+        if (isAuxMouseEvent(event)) {
+            layout.auxMouseClick(node, event);
         }
     };
 
+    const onContextMenu = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+        layout.showContextMenu(node, event);
+    };
+
     const onInterceptMouseDown = (event: React.MouseEvent | React.TouchEvent) => {
         event.stopPropagation();
     };
 
-    const onMaximizeToggle = () => {
+    const onMaximizeToggle = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
         if (node.canMaximize()) {
             layout.maximize(node);
         }
+        event.stopPropagation();
     };
 
-    const onClose = () => {
+    const onClose = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
         layout.doAction(Actions.deleteTabset(node.getId()));
+        event.stopPropagation();
     };
 
-    const onFloatTab = () => {
+    const onFloatTab = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
         if (selectedTabNode !== undefined) {
             layout.doAction(Actions.floatTab(selectedTabNode.getId()));
         }
+        event.stopPropagation();
     };
 
     const onDoubleClick = (event: Event) => {
@@ -93,7 +118,7 @@ export const TabSet = (props: ITabSetProps) => {
     let style = node._styleWithPosition();
 
     if (node.getModel().getMaximizedTabset() !== undefined && !node.isMaximized()) {
-        style.display = "none";
+        hideElement(style, node.getModel().isUseVisibility())
     }
 
     const tabs = [];
@@ -105,9 +130,9 @@ export const TabSet = (props: ITabSetProps) => {
                 <TabButton
                     layout={layout}
                     node={child}
+                    path={path + "/tb" + i}
                     key={child.getId()}
                     selected={isSelected}
-                    show={true}
                     height={node.getTabStripHeight()}
                     iconFactory={iconFactory}
                     titleFactory={titleFactory}
@@ -153,8 +178,10 @@ export const TabSet = (props: ITabSetProps) => {
         buttons.push(
             <button
                 key="overflowbutton"
+                data-layout-path={path + "/button/overflow"}
+
                 ref={overflowbuttonRef}
-                className={cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_OVERFLOW)}
+                className={cm(CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + " " + cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_OVERFLOW)}
                 title={overflowTitle}
                 onClick={onOverflowClick}
                 onMouseDown={onInterceptMouseDown}
@@ -171,6 +198,7 @@ export const TabSet = (props: ITabSetProps) => {
         buttons.push(
             <button
                 key="float"
+                data-layout-path={path + "/button/float"}
                 title={floatTitle}
                 className={cm(CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + " " + cm(CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON_FLOAT)}
                 onClick={onFloatTab}
@@ -188,6 +216,7 @@ export const TabSet = (props: ITabSetProps) => {
         btns.push(
             <button
                 key="max"
+                data-layout-path={path + "/button/max"}
                 title={node.isMaximized() ? minTitle : maxTitle}
                 className={cm(CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + " " + cm(CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON_ + (node.isMaximized() ? "max" : "min"))}
                 onClick={onMaximizeToggle}
@@ -205,6 +234,7 @@ export const TabSet = (props: ITabSetProps) => {
         btns.push(
             <button
                 key="close"
+                data-layout-path={path + "/button/close"}
                 title={title}
                 className={cm(CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + " " + cm(CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON_CLOSE)}
                 onClick={onClose}
@@ -269,7 +299,13 @@ export const TabSet = (props: ITabSetProps) => {
         }
 
         header = (
-            <div className={tabHeaderClasses} style={{ height: node.getHeaderHeight() + "px" }} onMouseDown={onMouseDown} onTouchStart={onMouseDown}>
+            <div className={tabHeaderClasses} style={{ height: node.getHeaderHeight() + "px" }}
+                data-layout-path={path + "/header"}
+                onMouseDown={onMouseDown}
+                onContextMenu={onContextMenu}
+                onClick={onAuxMouseClick}
+                onAuxClick={onAuxMouseClick}
+                onTouchStart={onMouseDown}>
                 <div className={cm(CLASSES.FLEXLAYOUT__TABSET_HEADER_CONTENT)}>{headerContent}</div>
                 {headerToolbar}
             </div>
@@ -284,7 +320,13 @@ export const TabSet = (props: ITabSetProps) => {
         tabStripStyle["bottom"] = "0px";
     }
     tabStrip = (
-        <div className={tabStripClasses} style={tabStripStyle} onMouseDown={onMouseDown} onTouchStart={onMouseDown}>
+        <div className={tabStripClasses} style={tabStripStyle}
+            data-layout-path={path + "/tabstrip"}
+            onMouseDown={onMouseDown}
+            onContextMenu={onContextMenu}
+            onClick={onAuxMouseClick}
+            onAuxClick={onAuxMouseClick}
+            onTouchStart={onMouseDown}>
             <div ref={tabbarInnerRef} className={cm(CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER) + " " + cm(CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER_ + node.getTabLocation())}>
                 <div
                     style={{ left: position }}
@@ -300,9 +342,16 @@ export const TabSet = (props: ITabSetProps) => {
     style = layout.styleFont(style);
 
     return (
-        <div ref={selfRef} style={style} className={cm(CLASSES.FLEXLAYOUT__TABSET)} onWheel={onMouseWheel}>
+        <div ref={selfRef} 
+            dir="ltr" 
+            data-layout-path={path}
+            style={style} 
+            className={cm(CLASSES.FLEXLAYOUT__TABSET)} 
+            onWheel={onMouseWheel}>
             {header}
             {tabStrip}
         </div>
     );
 };
+
+

package/src/view/Utils.tsx

@@ -0,0 +1,71 @@
+import * as React from "react";
+import TabNode from "../model/TabNode";
+import { ILayoutCallbacks, ITitleObject } from "./Layout";
+
+/** @hidden @internal */
+export function getRenderStateEx (
+    layout: ILayoutCallbacks,
+    node: TabNode,
+    iconFactory?: (node: TabNode) => React.ReactNode | undefined,
+    titleFactory?: (node: TabNode) => React.ReactNode | undefined
+) {
+    let leadingContent = iconFactory ? iconFactory(node) : undefined;
+    let titleContent: React.ReactNode = node.getName();
+    let name = node.getName();
+
+    function isTitleObject(obj: any): obj is ITitleObject {
+        return obj.titleContent !== undefined
+    }
+
+    if (titleFactory !== undefined) {
+        const titleObj = titleFactory(node);
+        if (titleObj !== undefined) {
+            if (typeof titleObj === "string") {
+                titleContent = titleObj as string;
+                name = titleObj as string;
+            } else if (isTitleObject(titleObj)) {
+                titleContent = titleObj.titleContent;
+                name = titleObj.name;
+            } else {
+                titleContent = titleObj;
+            }
+        }
+    }
+
+    if (leadingContent === undefined && node.getIcon() !== undefined) {
+        leadingContent = <img style={{width:"1em", height:"1em"}} src={node.getIcon()} alt="leadingContent" />;
+    }
+
+    let buttons: any[] = [];
+
+    // allow customization of leading contents (icon) and contents
+    const renderState = { leading: leadingContent, content: titleContent, name, buttons };
+    layout.customizeTab(node, renderState);
+
+    node._setRenderedName(renderState.name);
+
+    return renderState;
+
+}
+
+/** @hidden @internal */
+export function hideElement(style: Record<string, any>, useVisibility: ConstrainBoolean ) {
+    if (useVisibility) {
+        style.visibility = "hidden";
+    } else {
+        style.display = "none";
+    }
+}
+
+
+/** @hidden @internal */
+export function isAuxMouseEvent(event: React.MouseEvent<HTMLDivElement, MouseEvent> | React.TouchEvent<HTMLDivElement>) {
+    let auxEvent = false;
+    if (event.nativeEvent instanceof MouseEvent) {
+        if (event.nativeEvent.button !== 0 || event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) {
+            auxEvent = true; 
+        }
+    }
+    return auxEvent;
+}
+