@axelor/ui - npm Package Compare versions

Comparing version 0.0.35 to 0.0.36

core/overflow-list/overflow-list.js

@@ -12,3 +12,3 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
                 [styles.vertical]: overflowProps?.overflowAxis === "vertical",
-            }), style: style, children: [items.map((item) => (_jsx(OverflowItem, { id: item.id, groupId: item.groupId, priority: item.priority, children: _jsx(ListItem, { ...props, item: item }, item.id) }, item.id))), _jsx(ListMenu, { ...props })] }) }));
+            }), style: style, children: [items.map((item) => (_jsx(OverflowItem, { id: item.id, groupId: item.groupId, priority: item.priority, children: _jsx(ListItem, { ...props, item: item }, item.id) }, item.id))), _jsx(ListMenu, { ...props })] }) }, items.length));
 });
@@ -15,0 +15,0 @@ const ListItem = forwardRef((props, ref) => {

core/overflow/hooks.js

@@ -102,8 +102,10 @@ import { createOverflowManager, } from "@fluentui/priority-overflow";
 export const useOverflowCount = () => useOverflowContext((v) => {
-    return Object.entries(v.itemVisibility).reduce((acc, [id, visible]) => {
-        if (!visible) {
-            acc++;
-        }
-        return acc;
-    }, 0);
+    return v.hasOverflow
+        ? Object.entries(v.itemVisibility).reduce((acc, [id, visible]) => {
+            if (!visible) {
+                acc++;
+            }
+            return acc;
+        }, 0)
+        : 0;
 });
@@ -110,0 +112,0 @@ export function useOverflowMenu(id) {

core/overflow/overflow.js

 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { cloneElement, forwardRef, useCallback } from "react";
+import React, { cloneElement, forwardRef, useCallback, useRef } from "react";
 import { clsx } from "../clsx";
@@ -10,2 +10,3 @@ import { OverflowContext } from "./context";
     const { children, minimumVisible, overflowAxis = "horizontal", overflowDirection, padding, } = props;
+    const childrenRef = useRef();
     const [overflowState, setOverflowState] = React.useState({
@@ -23,3 +24,6 @@ hasOverflow: false,
             return {
-                hasOverflow: data.invisibleItems.length > 0,
+                hasOverflow: 
+                // is container visible by checking it's offsetWidth 
+                (childrenRef.current?.offsetWidth ?? 0) > 0 &&
+                    data.invisibleItems.length > 0,
                 itemVisibility,
@@ -38,3 +42,3 @@ groupVisibility,
     const clonedChild = cloneElement(children, {
-        ref: useRefs(containerRef, ref),
+        ref: useRefs(childrenRef, containerRef, ref),
         className: clsx(styles.overflowMenu, styles.overflowingItems, children.props.className),
@@ -41,0 +45,0 @@ });

package.json

 {
   "name": "@axelor/ui",
-  "version": "0.0.35",
+  "version": "0.0.36",
   "author": "Axelor",
@@ -5,0 +5,0 @@ "license": "AGPL-3.0-only",

No alert changes

Improved metrics

Total package byte prevSize

972292

increased by0.05%

Lines of code

11679

increased by0.05%

No dependency changes