WorkRoot/WRNexusJS
2
0
Fork 0
Code Issues Pull Requests Actions 23 Packages Projects Releases Wiki Activity

fix(ui): eliminate mega menu flash and lag
Quality / quality (ubuntu-latest) (push) Failing after 9m55s
Details
Quality / quality (windows-latest) (push) Canceled after 0s
Details

Browse Source
This commit is contained in:
Clintchiz
2026-08-24 22:33:02 +05:30
parent 7d737ec0a0
commit b98d417185
5 changed files with 26 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/components/MegaMenu.wrn
+21 -4
View File
@@ -204,7 +204,7 @@ component MegaMenu {
aria-haspopup="true"
aria-expanded='{visible}'
@click='activatePanel(event)'
@mousemove='hoverPanel(event)'
@mouseenter='hoverPanel(event)'
>
<span class='wrn-mega__trigger-icon {icon}' data-show="icon" aria-hidden="true"></span>
<span class="wrn-mega__trigger-label">{label}</span>
@@ -382,6 +382,10 @@ component MegaMenu {
box-shadow: var(--wrn-shadow-1);
}
/* Keep SSR output closed before the reactive runtime hydrates it. */
.wrn-mega__panel[data-show="false"] { display: none; }
.wrn-mega__panel[data-show="true"] { display: flex; }
.wrn-mega[data-panel-width="lg"] .wrn-mega__panel { width: min(48rem, calc(100vw - 2rem)); }
.wrn-mega[data-panel-width="xl"] .wrn-mega__panel { width: min(72rem, calc(100vw - 2rem)); }
.wrn-mega[data-panel-width="2xl"] .wrn-mega__panel { width: min(88rem, calc(100vw - 2rem)); }
@@ -462,9 +466,16 @@ component MegaMenu {
.wrn-mega[data-density="compact"] :is(.wrn-mega__panel, .wrn-mega__rail) { padding: 0.7rem; }
.wrn-mega[data-density="compact"] .wrn-mega__columns { gap: 0.65rem; }
.wrn-mega[data-variant="icon-grid"] .wrn-mega__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem; }
.wrn-mega[data-variant="catalog"] .wrn-mega__link { padding-block: 0.28rem; }
.wrn-mega[data-variant="catalog"] .wrn-mega__heading { color: var(--wrn-color-text); font-size: 0.78rem; letter-spacing: 0; text-transform: none; }
.wrn-mega[data-variant="catalog"] .wrn-mega__columns { grid-template-columns: minmax(0, 1fr); }
.wrn-mega[data-variant="catalog"] .wrn-mega__panel { height: min(36rem, calc(100dvh - 6.5rem)); }
.wrn-mega[data-variant="catalog"] .wrn-mega__layout { grid-template-columns: minmax(14rem, 17rem) minmax(0, 1fr); gap: 0; }
.wrn-mega[data-variant="catalog"] .wrn-mega__rail { border-radius: calc(var(--wrn-radius-lg) - 0.25rem); }
.wrn-mega[data-variant="catalog"] .wrn-mega__columns { padding: 0.35rem 0.5rem 0.75rem 1.25rem; grid-template-columns: minmax(0, 1fr); }
.wrn-mega[data-variant="catalog"] .wrn-mega__column { display: flex; min-height: 100%; flex-direction: column; }
.wrn-mega[data-variant="catalog"] .wrn-mega__heading { margin: 0 0 1rem; color: var(--wrn-color-text); font-size: 1rem; letter-spacing: 0; text-transform: none; }
.wrn-mega[data-variant="catalog"] .wrn-mega__list { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.35rem; }
.wrn-mega[data-variant="catalog"] .wrn-mega__link { min-height: 3.25rem; padding: 0.7rem 0.8rem; border: 1px solid transparent; }
.wrn-mega[data-variant="catalog"] .wrn-mega__link:hover { border-color: var(--wrn-color-border); }
.wrn-mega[data-variant="catalog"] .wrn-mega__column-action { margin-top: auto; padding-top: 1rem; }
.wrn-mega[data-variant="dark"] .wrn-mega__panel { color: #f8fafc; border-color: #2b2b2b; background: #151515; }
.wrn-mega[data-variant="dark"] :is(.wrn-mega__heading, .wrn-mega__link, .wrn-mega__featured strong) { color: #f8fafc; }
.wrn-mega[data-variant="dark"] :is(.wrn-mega__link-description, .wrn-mega__column-description, .wrn-mega__eyebrow, .wrn-mega__featured p) { color: #a3a3a3; }
@@ -532,6 +543,8 @@ component MegaMenu {
box-shadow: none;
}
.wrn-mega__panel[data-show="false"] { display: none; }
.wrn-mega__columns {
grid-template-columns: 1fr;
}
@@ -539,6 +552,10 @@ component MegaMenu {
.wrn-mega__rail, .wrn-mega__columns { overflow: visible; }
.wrn-mega__featured { width: auto; padding: 1rem 0 0; border-top: 1px solid var(--wrn-color-border); border-left: 0; }
.wrn-mega[data-variant="icon-grid"] .wrn-mega__list { grid-template-columns: 1fr; }
.wrn-mega[data-variant="catalog"] .wrn-mega__panel { height: auto; }
.wrn-mega[data-variant="catalog"] .wrn-mega__layout { grid-template-columns: 1fr; }
.wrn-mega[data-variant="catalog"] .wrn-mega__columns { padding: 1rem 0 0; }
.wrn-mega[data-variant="catalog"] .wrn-mega__list { grid-template-columns: 1fr; }
}
}
}
packages/ui/package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@wrnexus/ui",
"version": "0.8.33",
"version": "0.8.34",
"private": true,
"type": "module",
"main": "src/index.ts",
packages/ui/test/ui.test.ts
+2 -1
View File
@@ -3152,8 +3152,9 @@ test("mega menu keeps hover activation and click activation from cancelling each
const source = readFileSync(uiComponentPath("MegaMenu"), "utf8");
expect(source).toContain("openOnHover: boolean = true");
expect(source).toContain("@click='activatePanel(event)'");
expect(source).toContain("@mousemove='hoverPanel(event)'");
expect(source).toContain("@mouseenter='hoverPanel(event)'");
expect(source).toContain("}, 140)");
expect(source).toContain('.wrn-mega__panel[data-show="false"] { display: none; }');
expect(source).not.toContain("@focus='showPanel(event)'");
expect(source).toContain("max-height: calc(100dvh - 5.5rem)");
});