react-os-shell 0.6.7 → 0.6.9

package/dist/index.js

@@ -1221,7 +1221,7 @@ function StatusBadge({ status }) {
 }
 
 // src/version.ts
-var VERSION = "0.6.7" ;
+var VERSION = "0.6.9" ;
 var APP_VERSION = VERSION;
 
 // src/changelog.ts
@@ -3209,8 +3209,11 @@ function StartMenu({
   const [searchIdx, setSearchIdx] = useState(0);
   const menuRef = useRef(null);
   const flyoutRef = useRef(null);
+  const subFlyoutRef = useRef(null);
   const hoverTimeout = useRef();
   const childHoverTimeout = useRef();
+  const [measuredFlyout, setMeasuredFlyout] = useState(null);
+  const [measuredSub, setMeasuredSub] = useState(null);
   useEffect(() => {
     if (!open) {
       setSearch("");
@@ -3222,6 +3225,20 @@ function StartMenu({
   useEffect(() => {
     setHoveredChild(null);
   }, [hoveredSection]);
+  useLayoutEffect(() => {
+    if (!flyoutRef.current || !hoveredSection || search.length >= 2) return;
+    const h = flyoutRef.current.offsetHeight;
+    if (measuredFlyout?.key !== hoveredSection || measuredFlyout.h !== h) {
+      setMeasuredFlyout({ key: hoveredSection, h });
+    }
+  }, [hoveredSection, search, measuredFlyout]);
+  useLayoutEffect(() => {
+    if (!subFlyoutRef.current || !hoveredChild || search.length >= 2) return;
+    const h = subFlyoutRef.current.offsetHeight;
+    if (measuredSub?.key !== hoveredChild || measuredSub.h !== h) {
+      setMeasuredSub({ key: hoveredChild, h });
+    }
+  }, [hoveredChild, search, measuredSub]);
   useEffect(() => {
     if (!open) return;
     const handler = (e) => {
@@ -3354,7 +3371,8 @@ function StartMenu({
   const sizeConfig = tight ? { small: { w: "w-52", fw: "w-44", text: "text-xs", py: "py-1", px: "px-3", mw: 208, itemH: 24 }, medium: { w: "w-56", fw: "w-48", text: "text-xs", py: "py-1", px: "px-3", mw: 224, itemH: 26 }, large: { w: "w-64", fw: "w-52", text: "text-sm", py: "py-1.5", px: "px-3", mw: 256, itemH: 30 } }[size] : { small: { w: "w-56", fw: "w-48", text: "text-xs", py: "py-1.5", px: "px-3", mw: 224, itemH: 30 }, medium: { w: "w-64", fw: "w-56", text: "text-sm", py: "py-2", px: "px-4", mw: 256, itemH: 36 }, large: { w: "w-72", fw: "w-60", text: "text-sm", py: "py-2.5", px: "px-4", mw: 288, itemH: 40 } }[size];
   const menuGlass = glassStyle();
   const itemCls = `w-full flex items-center gap-2 rounded-lg ${sizeConfig.px} ${sizeConfig.py} ${sizeConfig.text}`;
-  const flyoutH = flyoutItems.length * sizeConfig.itemH + 12;
+  const flyoutEstH = flyoutItems.length * sizeConfig.itemH + 12;
+  const flyoutH = measuredFlyout?.key === hoveredSection ? measuredFlyout.h : flyoutEstH;
   const menuWidth = sizeConfig.mw;
   const menuRect = menuRef.current?.getBoundingClientRect();
   const minTop = menuRect ? menuRect.top : taskbarPosition === "top" ? taskbarH + 4 : 4;
@@ -3362,7 +3380,6 @@ function StartMenu({
   let flyoutTop = hoveredY - flyoutH / 2;
   if (flyoutTop < minTop) flyoutTop = minTop;
   if (flyoutTop + flyoutH > maxBottom) flyoutTop = Math.max(minTop, maxBottom - flyoutH);
-  const flyoutMaxH = maxBottom - flyoutTop;
   const handleSectionHover = (label, e) => {
     clearTimeout(hoverTimeout.current);
     const rect = e.currentTarget.getBoundingClientRect();
@@ -3570,8 +3587,8 @@ function StartMenu({
         "div",
         {
           ref: flyoutRef,
-          className: `fixed ${sizeConfig.fw} rounded-2xl flex flex-col overflow-hidden`,
-          style: { left: menuRef.current ? menuRef.current.getBoundingClientRect().right + 4 : menuWidth + 12, top: flyoutTop, maxHeight: flyoutMaxH, animation: "submenu-in 0.1s ease-out", ...menuGlass },
+          className: `fixed ${sizeConfig.fw} rounded-2xl overflow-hidden`,
+          style: { left: menuRef.current ? menuRef.current.getBoundingClientRect().right + 4 : menuWidth + 12, top: flyoutTop, animation: "submenu-in 0.1s ease-out", ...menuGlass },
           onMouseEnter: () => clearTimeout(hoverTimeout.current),
           onMouseLeave: () => {
             hoverTimeout.current = setTimeout(() => {
@@ -3579,7 +3596,7 @@ function StartMenu({
               setHoveredChild(null);
             }, 200);
           },
-          children: /* @__PURE__ */ jsx("div", { className: "py-1 px-1 overflow-y-auto", children: flyoutItems.map((item) => {
+          children: /* @__PURE__ */ jsx("div", { className: "py-1 px-1", children: flyoutItems.map((item) => {
             const hasChildren = !!item.children && item.children.length > 0;
             const isChildHovered = hoveredChild === item.to;
             return /* @__PURE__ */ jsxs(
@@ -3621,16 +3638,17 @@ function StartMenu({
         if (!parent || kids.length === 0) return null;
         const flyoutRect = flyoutRef.current?.getBoundingClientRect();
         const subLeft = flyoutRect ? flyoutRect.right + 4 : 0;
-        const subH = kids.length * sizeConfig.itemH + 12;
+        const subEstH = kids.length * sizeConfig.itemH + 12;
+        const subH = measuredSub?.key === hoveredChild ? measuredSub.h : subEstH;
         let subTop = hoveredChildY - subH / 2;
         if (subTop < minTop) subTop = minTop;
         if (subTop + subH > maxBottom) subTop = Math.max(minTop, maxBottom - subH);
-        const subMaxH = maxBottom - subTop;
         return /* @__PURE__ */ jsx(
           "div",
           {
-            className: `fixed ${sizeConfig.fw} rounded-2xl flex flex-col overflow-hidden`,
-            style: { left: subLeft, top: subTop, maxHeight: subMaxH, animation: "submenu-in 0.1s ease-out", ...menuGlass },
+            ref: subFlyoutRef,
+            className: `fixed ${sizeConfig.fw} rounded-2xl overflow-hidden`,
+            style: { left: subLeft, top: subTop, animation: "submenu-in 0.1s ease-out", ...menuGlass },
             onMouseEnter: () => {
               clearTimeout(hoverTimeout.current);
               clearTimeout(childHoverTimeout.current);
@@ -3638,7 +3656,7 @@ function StartMenu({
             onMouseLeave: () => {
               childHoverTimeout.current = setTimeout(() => setHoveredChild(null), 200);
             },
-            children: /* @__PURE__ */ jsx("div", { className: "py-1 px-1 overflow-y-auto", children: kids.map((child) => /* @__PURE__ */ jsxs("div", { children: [
+            children: /* @__PURE__ */ jsx("div", { className: "py-1 px-1", children: kids.map((child) => /* @__PURE__ */ jsxs("div", { children: [
               /* @__PURE__ */ jsxs(
                 "button",
                 {