Skip to content

Commit

Permalink
fix(html): menu popup should be rendered on a root level
Browse files Browse the repository at this point in the history
  • Loading branch information
@TeyaVes
TeyaVes committed Jan 27, 2025
1 parent c2f43c6 commit 03fc0f9
Show file tree
Hide file tree
Showing 4 changed files with 136 additions and 136 deletions.
3 changes: 0 additions & 3 deletions packages/html/src/menu/menu-item.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@ export type KendoMenuItemProps = {
arrowIconName?: string;
dir?: "rtl" | "ltr";
children?: React.JSX.Element[];
popup?: React.JSX.Element;
};

export type KendoMenuItemState = { [K in (typeof states)[number]]?: boolean };
Expand Down Expand Up @@ -53,7 +52,6 @@ export const MenuItem = (
iconPosition = defaultOptions.iconPosition,
dir,
children,
popup,
...other
} = props;

Expand Down Expand Up @@ -109,7 +107,6 @@ export const MenuItem = (
{showArrow && <span className="k-menu-expand-arrow"><Icon icon={expandArrowName} /></span>}
</span>
{contentTemplate}
{popup}
</li>
);
};
Expand Down
3 changes: 3 additions & 0 deletions packages/html/src/menu/menu.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ export type KendoMenuProps = {
scrollButtonsPosition?: "around" | "start" | "end";
wrapperStyles?: React.CSSProperties;
dir?: "rtl" | "ltr";
popup?: React.JSX.Element;
};

const defaultOptions = {
Expand All @@ -35,6 +36,7 @@ export const Menu = (
scrollButtonsPosition = defaultOptions.scrollButtonsPosition,
wrapperStyles,
dir,
popup,
...other
} = props;

Expand Down Expand Up @@ -90,6 +92,7 @@ export const Menu = (
</MenuScrollableWrapper>) :
ulMenu
}
{popup}
</>
);
};
Expand Down
193 changes: 93 additions & 100 deletions packages/html/src/menu/tests/menu-icons.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ const style = `
.k-animation-container {
position: absolute;
top: 100%;
}
`;

Expand All @@ -21,45 +20,43 @@ export default () =>(
<span>Horizontal Menu RTL</span>

<section>
<MenuNormal>
<MenuNormal popup={
<>
<Popup className="k-menu-popup" offset={{ left: "120px", top: "auto" }}>
<MenuList>
<MenuListItem first text="Disabled" disabled></MenuListItem>
<MenuListItem text="Normal"></MenuListItem>
<MenuListItem text="Hover" hover showArrow></MenuListItem>
<MenuListItem text="Active" active showArrow></MenuListItem>
<MenuListItem text="Focus" focus></MenuListItem>
<MenuListItem last text="Focus & Active" active focus></MenuListItem>
</MenuList>
</Popup>
</>
}>
<MenuItem first text="Normal" icon="folder"></MenuItem>
<MenuItem text="Active" icon="folder" active showArrow arrowIconName="caret-alt-down"
popup={
<>
<Popup className="k-menu-popup" positionMode="fixed">
<MenuList>
<MenuListItem first text="Disabled" disabled></MenuListItem>
<MenuListItem text="Normal"></MenuListItem>
<MenuListItem text="Hover" hover showArrow></MenuListItem>
<MenuListItem text="Active" active showArrow></MenuListItem>
<MenuListItem text="Focus" focus></MenuListItem>
<MenuListItem last text="Focus & Active" active focus></MenuListItem>
</MenuList>
</Popup>
</>
}></MenuItem>
<MenuItem text="Active" icon="folder" active showArrow arrowIconName="caret-alt-down"></MenuItem>
<MenuItem last selected text="Selected" icon="folder"></MenuItem>
</MenuNormal>
</section>

<section>
<MenuNormal dir="rtl">
<MenuItem first text="Normal" icon="folder"></MenuItem>
<MenuItem text="Active" icon="folder" active showArrow arrowIconName="caret-alt-down"
popup={
<>
<Popup className="k-menu-popup" positionMode="fixed">
<MenuList dir="rtl">
<MenuListItem first text="Disabled" disabled></MenuListItem>
<MenuListItem text="Normal"></MenuListItem>
<MenuListItem text="Hover" hover showArrow></MenuListItem>
<MenuListItem text="Active" active showArrow></MenuListItem>
<MenuListItem text="Focus" focus></MenuListItem>
<MenuListItem last text="Focus & Active" active focus></MenuListItem>
</MenuList>
</Popup>
</>
}></MenuItem>
<MenuNormal dir="rtl" popup={
<>
<Popup className="k-menu-popup" offset={{ left: "770px", top: "auto" }}>
<MenuList dir="rtl">
<MenuListItem first text="Disabled" disabled></MenuListItem>
<MenuListItem text="Normal"></MenuListItem>
<MenuListItem text="Hover" hover showArrow></MenuListItem>
<MenuListItem text="Active" active showArrow></MenuListItem>
<MenuListItem text="Focus" focus></MenuListItem>
<MenuListItem last text="Focus & Active" active focus></MenuListItem>
</MenuList>
</Popup>
</>
}>
<MenuItem first text="Normal" icon="folder"></MenuItem>
<MenuItem text="Active" icon="folder" active showArrow arrowIconName="caret-alt-down"></MenuItem>
<MenuItem last selected text="Selected" icon="folder"></MenuItem>
</MenuNormal>
</section>
Expand All @@ -68,45 +65,43 @@ export default () =>(
<span>Horizontal Menu RTL Expand Icon</span>

<section>
<MenuNormal>
<MenuNormal popup={
<>
<Popup className="k-menu-popup" offset={{ left: "120px", top: "auto" }}>
<MenuList dir="rtl">
<MenuListItem first text="Disabled" disabled></MenuListItem>
<MenuListItem text="Normal"></MenuListItem>
<MenuListItem text="Hover" hover showArrow arrowIconName="chevron-right"></MenuListItem>
<MenuListItem text="Active" active showArrow arrowIconName="chevron-right"></MenuListItem>
<MenuListItem text="Focus" focus></MenuListItem>
<MenuListItem last text="Focus & Active" active focus></MenuListItem>
</MenuList>
</Popup>
</>
}>
<MenuItem first text="Normal" icon="folder"></MenuItem>
<MenuItem text="Active" icon="folder" active showArrow arrowIconName="chevron-down"
popup={
<>
<Popup className="k-menu-popup" positionMode="fixed">
<MenuList dir="rtl">
<MenuListItem first text="Disabled" disabled></MenuListItem>
<MenuListItem text="Normal"></MenuListItem>
<MenuListItem text="Hover" hover showArrow arrowIconName="chevron-right"></MenuListItem>
<MenuListItem text="Active" active showArrow arrowIconName="chevron-right"></MenuListItem>
<MenuListItem text="Focus" focus></MenuListItem>
<MenuListItem last text="Focus & Active" active focus></MenuListItem>
</MenuList>
</Popup>
</>
}></MenuItem>
<MenuItem text="Active" icon="folder" active showArrow arrowIconName="chevron-down"></MenuItem>
<MenuItem last selected text="Selected" icon="folder"></MenuItem>
</MenuNormal>
</section>

<section>
<MenuNormal dir="rtl">
<MenuItem first text="Normal" icon="folder"></MenuItem>
<MenuItem text="Active" icon="folder" active showArrow arrowIconName="chevron-down"
popup={
<>
<Popup className="k-menu-popup" positionMode="fixed">
<MenuList dir="rtl">
<MenuListItem first text="Disabled" disabled></MenuListItem>
<MenuListItem text="Normal"></MenuListItem>
<MenuListItem text="Hover" hover showArrow arrowIconName="chevron-left"></MenuListItem>
<MenuListItem text="Active" active showArrow arrowIconName="chevron-left"></MenuListItem>
<MenuListItem text="Focus" focus></MenuListItem>
<MenuListItem last text="Focus & Active" active focus></MenuListItem>
</MenuList>
</Popup>
</>
}></MenuItem>
<MenuNormal dir="rtl" popup={
<>
<Popup className="k-menu-popup" offset={{ left: "770px", top: "auto" }}>
<MenuList dir="rtl">
<MenuListItem first text="Disabled" disabled></MenuListItem>
<MenuListItem text="Normal"></MenuListItem>
<MenuListItem text="Hover" hover showArrow arrowIconName="chevron-left"></MenuListItem>
<MenuListItem text="Active" active showArrow arrowIconName="chevron-left"></MenuListItem>
<MenuListItem text="Focus" focus></MenuListItem>
<MenuListItem last text="Focus & Active" active focus></MenuListItem>
</MenuList>
</Popup>
</>
}>
<MenuItem first text="Normal" icon="folder"></MenuItem>
<MenuItem text="Active" icon="folder" active showArrow arrowIconName="chevron-down"></MenuItem>
<MenuItem last selected text="Selected" icon="folder"></MenuItem>
</MenuNormal>
</section>
Expand All @@ -115,45 +110,43 @@ export default () =>(
<span>Horizontal Menu RTL Icon After Text</span>

<section>
<MenuNormal>
<MenuNormal popup={
<>
<Popup className="k-menu-popup" offset={{ left: "120px", top: "auto" }}>
<MenuList dir="rtl">
<MenuListItem first text="Disabled" disabled></MenuListItem>
<MenuListItem text="Normal"></MenuListItem>
<MenuListItem text="Hover" hover showArrow arrowIconName="chevron-right"></MenuListItem>
<MenuListItem text="Active" active showArrow arrowIconName="chevron-right"></MenuListItem>
<MenuListItem text="Focus" focus></MenuListItem>
<MenuListItem last text="Focus & Active" active focus></MenuListItem>
</MenuList>
</Popup>
</>
}>
<MenuItem first text="Normal" icon="folder" iconPosition="after"></MenuItem>
<MenuItem text="Active" icon="folder" iconPosition="after" active showArrow arrowIconName="chevron-down"
popup={
<>
<Popup className="k-menu-popup" positionMode="fixed">
<MenuList dir="rtl">
<MenuListItem first text="Disabled" disabled></MenuListItem>
<MenuListItem text="Normal"></MenuListItem>
<MenuListItem text="Hover" hover showArrow arrowIconName="chevron-right"></MenuListItem>
<MenuListItem text="Active" active showArrow arrowIconName="chevron-right"></MenuListItem>
<MenuListItem text="Focus" focus></MenuListItem>
<MenuListItem last text="Focus & Active" active focus></MenuListItem>
</MenuList>
</Popup>
</>
}></MenuItem>
<MenuItem text="Active" icon="folder" iconPosition="after" active showArrow arrowIconName="chevron-down"></MenuItem>
<MenuItem last selected text="Selected" icon="folder" iconPosition="after"></MenuItem>
</MenuNormal>
</section>

<section>
<MenuNormal dir="rtl">
<MenuItem first text="Normal" icon="folder" iconPosition="after"></MenuItem>
<MenuItem text="Active" icon="folder" iconPosition="after" active showArrow arrowIconName="chevron-down"
popup={
<>
<Popup className="k-menu-popup" positionMode="fixed">
<MenuList dir="rtl">
<MenuListItem first text="Disabled" disabled></MenuListItem>
<MenuListItem text="Normal"></MenuListItem>
<MenuListItem text="Hover" hover showArrow arrowIconName="chevron-left"></MenuListItem>
<MenuListItem text="Active" active showArrow arrowIconName="chevron-left"></MenuListItem>
<MenuListItem text="Focus" focus></MenuListItem>
<MenuListItem last text="Focus & Active" active focus></MenuListItem>
</MenuList>
</Popup>
</>
}></MenuItem>
<MenuNormal dir="rtl" popup={
<>
<Popup className="k-menu-popup" offset={{ left: "770px", top: "auto" }}>
<MenuList dir="rtl">
<MenuListItem first text="Disabled" disabled></MenuListItem>
<MenuListItem text="Normal"></MenuListItem>
<MenuListItem text="Hover" hover showArrow arrowIconName="chevron-left"></MenuListItem>
<MenuListItem text="Active" active showArrow arrowIconName="chevron-left"></MenuListItem>
<MenuListItem text="Focus" focus></MenuListItem>
<MenuListItem last text="Focus & Active" active focus></MenuListItem>
</MenuList>
</Popup>
</>
}>
<MenuItem first text="Normal" icon="folder" iconPosition="after"></MenuItem>
<MenuItem text="Active" icon="folder" iconPosition="after" active showArrow arrowIconName="chevron-down"></MenuItem>
<MenuItem last selected text="Selected" icon="folder" iconPosition="after" showArrow arrowIconName="chevron-down"></MenuItem>
</MenuNormal>
</section>
Expand Down
Loading

0 comments on commit 03fc0f9

Please sign in to comment.