diff --git a/change/@fluentui-web-components-5dc79d55-e411-4ada-9707-2d868421f7c2.json b/change/@fluentui-web-components-5dc79d55-e411-4ada-9707-2d868421f7c2.json new file mode 100644 index 0000000000000..1769e6d6bcd61 --- /dev/null +++ b/change/@fluentui-web-components-5dc79d55-e411-4ada-9707-2d868421f7c2.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "fix anchor positioning for rtl", + "packageName": "@fluentui/web-components", + "email": "machi@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/web-components/docs/web-components.api.md b/packages/web-components/docs/web-components.api.md index fef7fb412a672..66be9343c0d99 100644 --- a/packages/web-components/docs/web-components.api.md +++ b/packages/web-components/docs/web-components.api.md @@ -3195,14 +3195,26 @@ export function listboxTemplate(): ElementViewTemplate; // @public export class Menu extends FASTElement { + // @internal + protected addMenuListListeners(): void; + // @internal + protected addTriggerListeners(): void; closeMenu: (event?: Event) => void; closeOnScroll?: boolean; closeOnScrollChanged(oldValue: boolean, newValue: boolean): void; connectedCallback(): void; disconnectedCallback(): void; + // @internal + protected documentClickHandler: (e: any) => void; focusMenuList(): void; focusTrigger(): void; menuKeydownHandler(e: KeyboardEvent): boolean | void; + // @internal + protected _menuList?: HTMLElement; + // @internal (undocumented) + protected _menuListAbortController?: AbortController; + // @internal + protected _open: boolean; openMenu: (e?: Event) => void; openOnContext?: boolean; openOnContextChanged(oldValue: boolean, newValue: boolean): void; @@ -3222,6 +3234,10 @@ export class Menu extends FASTElement { split?: boolean; toggleHandler: (e: Event) => void; toggleMenu: () => void; + // @internal + protected _trigger?: HTMLElement; + // @internal (undocumented) + protected _triggerAbortController?: AbortController; triggerKeydownHandler: (e: KeyboardEvent) => boolean | void; } diff --git a/packages/web-components/src/listbox/listbox.styles.ts b/packages/web-components/src/listbox/listbox.styles.ts index 86a75f60930a7..e5eba76932c47 100644 --- a/packages/web-components/src/listbox/listbox.styles.ts +++ b/packages/web-components/src/listbox/listbox.styles.ts @@ -43,8 +43,8 @@ export const styles = css` position: fixed; max-block-size: var(--listbox-max-height, calc(50vh - anchor-size(self-block))); min-inline-size: anchor-size(inline); - inset-block-start: anchor(end); - inset-inline-start: anchor(start); + inset-block-start: anchor(outside); + inset-inline-start: anchor(inside); position-try-fallbacks: flip-block, flip-inline, flip-inline flip-block; } } diff --git a/packages/web-components/src/menu-item/menu-item.styles.ts b/packages/web-components/src/menu-item/menu-item.styles.ts index 4b68ad2832a4b..b28b47b94fe72 100644 --- a/packages/web-components/src/menu-item/menu-item.styles.ts +++ b/packages/web-components/src/menu-item/menu-item.styles.ts @@ -144,15 +144,20 @@ export const styles = css` position: relative; } + @position-try --inline-inside { + inset-inline-start: unset; + inset-inline-end: anchor(inside); + } + ::slotted([popover]) { margin: 0; max-height: var(--menu-max-height, auto); position: fixed; position-anchor: --menu-trigger; inset: unset; - inset-block-start: anchor(start); - inset-inline-start: anchor(end); - position-try-fallbacks: flip-inline, block-start, block-end; + inset-block-start: anchor(inside); + inset-inline-start: anchor(outside); + position-try-fallbacks: --inline-inside, flip-block, flip-block --inline-inside; z-index: 1; } diff --git a/packages/web-components/src/menu/menu.styles.ts b/packages/web-components/src/menu/menu.styles.ts index 37b258f14e23e..e99bac7eaa6f0 100644 --- a/packages/web-components/src/menu/menu.styles.ts +++ b/packages/web-components/src/menu/menu.styles.ts @@ -17,16 +17,16 @@ export const styles = css` max-height: var(--menu-max-height, auto); position-anchor: --menu-trigger; inset: unset; - inset-block-start: anchor(end); - inset-inline-start: anchor(start); - position-try-fallbacks: flip-block; + inset-block-start: anchor(outside); + inset-inline-start: anchor(self-start); + position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline; position: fixed; z-index: 1; } :host([split]) ::slotted([popover]) { - inset-inline-start: auto; - inset-inline-end: anchor(end); + inset-inline-start: unset; + inset-inline-end: anchor(self-end); } ::slotted([popover]:not(:popover-open)) { diff --git a/packages/web-components/src/menu/menu.ts b/packages/web-components/src/menu/menu.ts index e61ea0279305f..4826ad882d16d 100644 --- a/packages/web-components/src/menu/menu.ts +++ b/packages/web-components/src/menu/menu.ts @@ -148,28 +148,28 @@ export class Menu extends FASTElement { * Defines whether the menu is open or not. * @internal */ - private _open: boolean = false; + protected _open: boolean = false; /** * The trigger element of the menu. * @internal */ - private _trigger?: HTMLElement; + protected _trigger?: HTMLElement; /** * The menu list element of the menu which has the popover behavior. * @internal */ - private _menuList?: HTMLElement; + protected _menuList?: HTMLElement; /** * @internal */ - private _triggerAbortController?: AbortController; + protected _triggerAbortController?: AbortController; /** * @internal */ - private _menuListAbortController?: AbortController; + protected _menuListAbortController?: AbortController; /** * Called when the element is connected to the DOM. @@ -356,7 +356,7 @@ export class Menu extends FASTElement { * Adds trigger-related event listeners. * @internal */ - private addTriggerListeners(): void { + protected addTriggerListeners(): void { this._triggerAbortController = new AbortController(); const { signal } = this._triggerAbortController; @@ -376,7 +376,7 @@ export class Menu extends FASTElement { * Adds menu-list event listeners. * @internal */ - private addMenuListListeners(): void { + protected addMenuListListeners(): void { this._menuListAbortController = new AbortController(); const { signal } = this._menuListAbortController; @@ -452,7 +452,7 @@ export class Menu extends FASTElement { * @internal * @param e - The event triggered on document click. */ - private documentClickHandler = (e: any) => { + protected documentClickHandler = (e: any) => { if (!e.composedPath().some((el: any) => el === this._trigger || el === this._menuList)) { this.closeMenu(); }