flexlayout-react 0.8.7 → 0.8.9

package/src/view/BorderTabSet.tsx

@@ -35,7 +35,7 @@ export const BorderTabSet = (props: IBorderTabSetProps) => {
         border.setTabHeaderRect(layout.getBoundingClientRect(selfRef.current!));
     });
 
-    const { selfRef, userControlledPositionRef, onScroll, onScrollPointerDown, hiddenTabs, onMouseWheel, isTabOverflow } =
+    const { selfRef, userControlledPositionRef, onScroll, onScrollPointerDown, hiddenTabs, onMouseWheel, isDockStickyButtons, isShowHiddenTabs } =
         useTabOverflow(layout, border, Orientation.flip(border.getOrientation()), tabStripInnerRef, miniScrollRef,
             layout.getClassName(CLASSES.FLEXLAYOUT__BORDER_BUTTON)
         );
@@ -132,7 +132,7 @@ export const BorderTabSet = (props: IBorderTabSetProps) => {
     }
 
     if (stickyButtons.length > 0) {
-        if (isTabOverflow) {
+        if (isDockStickyButtons) {
             buttons = [...stickyButtons, ...buttons];
         } else {
             tabButtons.push(<div
@@ -147,7 +147,7 @@ export const BorderTabSet = (props: IBorderTabSetProps) => {
         }
     }
 
-    if (hiddenTabs.length > 0) {
+    if (isShowHiddenTabs) {
         const overflowTitle = layout.i18nName(I18nLabel.Overflow_Menu_Tooltip);
         let overflowContent;
         if (typeof icons.more === "function") {
@@ -157,7 +157,7 @@ export const BorderTabSet = (props: IBorderTabSetProps) => {
         } else {
             overflowContent = (<>
                 {icons.more}
-                <div className={cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_OVERFLOW_COUNT)}>{hiddenTabs.length}</div>
+                <div className={cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_OVERFLOW_COUNT)}>{hiddenTabs.length>0?hiddenTabs.length: ""}</div>
             </>);
         }
         buttons.splice(Math.min(renderState.overflowPosition, buttons.length), 0,

package/src/view/Layout.tsx

@@ -1228,7 +1228,7 @@ export class LayoutInternal extends React.Component<ILayoutInternalProps, ILayou
     // *************************** End Drag Drop *************************************
 }
 
-export const FlexLayoutVersion = "0.8.7";
+export const FlexLayoutVersion = "0.8.9";
 
 export type DragRectRenderCallback = (
     content: React.ReactNode | undefined,

package/src/view/PopupMenu.tsx

@@ -5,6 +5,7 @@ import { LayoutInternal } from "./Layout";
 import { TabButtonStamp } from "./TabButtonStamp";
 import { TabSetNode } from "../model/TabSetNode";
 import { BorderNode } from "../model/BorderNode";
+import { useEffect, useRef } from "react";
 
 /** @internal */
 export function showPopup(
@@ -86,6 +87,14 @@ interface IPopupMenuProps {
 /** @internal */
 const PopupMenu = (props: IPopupMenuProps) => {
     const { parentNode, items, onHide, onSelect, classNameMapper, layout } = props;
+    const divRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        // Set focus when the component mounts
+        if (divRef.current) {
+            divRef.current.focus();
+        }
+    }, []);
 
     const onItemClick = (item: { index: number; node: TabNode }, event: React.MouseEvent<HTMLElement, MouseEvent>) => {
         onSelect(item);
@@ -106,6 +115,12 @@ const PopupMenu = (props: IPopupMenuProps) => {
         layout.clearDragMain();
     };
 
+    const handleKeyDown = (event: React.KeyboardEvent) => {
+        if (event.key === "Escape") {
+            onHide();
+        }
+    };
+
     const itemElements = items.map((item, i) => {
         let classes = classNameMapper(CLASSES.FLEXLAYOUT__POPUP_MENU_ITEM);
         if (parentNode.getSelected() === item.index) {
@@ -131,6 +146,9 @@ const PopupMenu = (props: IPopupMenuProps) => {
 
     return (
         <div className={classNameMapper(CLASSES.FLEXLAYOUT__POPUP_MENU)}
+            ref={divRef}
+            tabIndex={0}  // Make div focusable
+            onKeyDown={handleKeyDown}
             data-layout-path="/popup-menu"
         >
             {itemElements}

package/src/view/TabButton.tsx

@@ -93,8 +93,7 @@ export const TabButton = (props: ITabButtonProps) => {
     const onClose = (event: React.MouseEvent<HTMLElement>) => {
         if (isClosable()) {
             layout.doAction(Actions.deleteTab(node.getId()));
-        } else {
-            onClick();
+            event.stopPropagation();
         }
     };
 

package/src/view/TabOverflowHook.tsx

@@ -17,7 +17,8 @@ export const useTabOverflow = (
     tabClassName: string
 ) => {
     const [hiddenTabs, setHiddenTabs] = React.useState<number[]>([]);
-    const [isTabOverflow, setTabOverflow] = React.useState<boolean>(false);
+    const [isShowHiddenTabs, setShowHiddenTabs] = React.useState<boolean>(false);
+    const [isDockStickyButtons, setDockStickyButtons] = React.useState<boolean>(false);
 
     const selfRef = React.useRef<HTMLDivElement | null>(null);
     const userControlledPositionRef = React.useRef<boolean>(false);
@@ -27,27 +28,27 @@ export const useTabOverflow = (
     const repositioningRef = React.useRef<boolean>(false);
     hiddenTabsRef.current = hiddenTabs;
 
-    // if node changes (new model) then reset scroll to 0
-    React.useEffect(() => {
+    // if node id changes (new model) then reset scroll to 0
+    React.useLayoutEffect(() => {
         if (tabStripRef.current) {
             setScrollPosition(0);
         }
-    }, [node]);
+    }, [node.getId()]);
 
     // if selected node or tabset/border rectangle change then unset usercontrolled (so selected tab will be kept in view)
-    React.useEffect(() => {
+    React.useLayoutEffect(() => {
         userControlledPositionRef.current = false;
     }, [node.getSelectedNode(), node.getRect().width, node.getRect().height]);
 
-    React.useEffect(() => {
+    React.useLayoutEffect(() => {
         checkForOverflow(); // if tabs + sticky buttons length > scroll area => move sticky buttons to right buttons
 
         if (userControlledPositionRef.current === false) {
             scrollIntoView();
         }
 
-        updateHiddenTabs();
         updateScrollMetrics();
+        updateHiddenTabs();
     });
 
     function scrollIntoView() {
@@ -57,12 +58,12 @@ export const useTabOverflow = (
             const selectedRect = selectedTabNode.getTabRect()!;
 
             let shift = getNear(stripRect) - getNear(selectedRect);
-            if (shift > 2 || getSize(selectedRect) > getSize(stripRect)) { // maybe 2 will prevent jitter?
+            if (shift > 0 || getSize(selectedRect) > getSize(stripRect)) { 
                 setScrollPosition(getScrollPosition(tabStripRef.current) - shift);
                 repositioningRef.current = true; // prevent onScroll setting userControlledPosition
             } else {
                 shift = getFar(selectedRect) - getFar(stripRect);
-                if (shift > 2) {
+                if (shift > 0) {
                     setScrollPosition(getScrollPosition(tabStripRef.current) + shift);
                     repositioningRef.current = true;
                 }
@@ -108,6 +109,13 @@ export const useTabOverflow = (
     }
 
     const updateHiddenTabs = () => {
+        const newHiddenTabs = findHiddenTabs();
+        const showHidden = newHiddenTabs.length > 0;
+
+        if (showHidden !== isShowHiddenTabs) {
+            setShowHiddenTabs(showHidden);
+        }
+
         if (updateHiddenTabsTimerRef.current === undefined) {
             // throttle updates to prevent Maximum update depth exceeded error
             updateHiddenTabsTimerRef.current = setTimeout(() => {
@@ -177,10 +185,10 @@ export const useTabOverflow = (
             const strip = tabStripRef.current;
             const tabContainer = strip.firstElementChild!;
 
-            const offset = isTabOverflow ? 10 : 0; // prevents flashing, after sticky buttons docked set, must be 10 pixels smaller before unsetting
+            const offset = isDockStickyButtons ? 10 : 0; // prevents flashing, after sticky buttons docked set, must be 10 pixels smaller before unsetting
             const dock = (getElementSize(tabContainer) + offset) > getElementSize(tabStripRef.current);
-            if (dock !== isTabOverflow) {
-                setTabOverflow(dock);
+            if (dock !== isDockStickyButtons) {
+                setDockStickyButtons(dock);
             }
         }
     }
@@ -289,7 +297,7 @@ export const useTabOverflow = (
         }
     }
 
-    return { selfRef, userControlledPositionRef, onScroll, onScrollPointerDown, hiddenTabs, onMouseWheel, isTabOverflow };
+    return { selfRef, userControlledPositionRef, onScroll, onScrollPointerDown, hiddenTabs, onMouseWheel, isDockStickyButtons, isShowHiddenTabs };
 };
 
 function arraysEqual(arr1: number[], arr2: number[]) {

package/src/view/TabSet.tsx

@@ -51,7 +51,7 @@ export const TabSet = (props: ITabSetProps) => {
     });
 
     // this must be after the useEffect, so the node rect is already set (else window popin will not position tabs correctly)
-    const { selfRef, userControlledPositionRef, onScroll, onScrollPointerDown, hiddenTabs, onMouseWheel, isTabOverflow } =
+    const { selfRef, userControlledPositionRef, onScroll, onScrollPointerDown, hiddenTabs, onMouseWheel, isDockStickyButtons, isShowHiddenTabs } =
         useTabOverflow(layout, node, Orientation.HORZ, tabStripInnerRef, miniScrollRef,
             layout.getClassName(CLASSES.FLEXLAYOUT__TAB_BUTTON));
 
@@ -186,7 +186,7 @@ export const TabSet = (props: ITabSetProps) => {
     }
 
     if (stickyButtons.length > 0) {
-        if (!node.isEnableTabWrap() && (isTabOverflow || isTabStretch)) {
+        if (!node.isEnableTabWrap() && (isDockStickyButtons || isTabStretch)) {
             buttons = [...stickyButtons, ...buttons];
         } else {
             tabs.push(<div
@@ -202,7 +202,7 @@ export const TabSet = (props: ITabSetProps) => {
     }
 
     if (!node.isEnableTabWrap()) {
-        if (hiddenTabs.length > 0) {
+        if (isShowHiddenTabs) {
             const overflowTitle = layout.i18nName(I18nLabel.Overflow_Menu_Tooltip);
             let overflowContent;
             if (typeof icons.more === "function") {
@@ -211,7 +211,7 @@ export const TabSet = (props: ITabSetProps) => {
             } else {
                 overflowContent = (<>
                     {icons.more}
-                    <div className={cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_OVERFLOW_COUNT)}>{hiddenTabs.length}</div>
+                    <div className={cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_OVERFLOW_COUNT)}>{hiddenTabs.length>0?hiddenTabs.length: ""}</div>
                 </>);
             }
             buttons.splice(Math.min(renderState.overflowPosition, buttons.length), 0,

package/style/_themes.scss

@@ -559,7 +559,7 @@
             --color-border-tab-unselected: gray;
             --color-border-tab-unselected-background: #d3d4e745;
 
-            --color-splitter: #{$color_background};
+            --color-splitter: var(--color-background);
             --color-splitter-hover: var(--color-2);
             --color-splitter-drag: var(--color-2);