@fluentui/web-components 3.0.0-beta.2 → 3.0.0-beta.4

package/CHANGELOG.md

@@ -1,12 +1,30 @@
 # Change Log - @fluentui/web-components
 
-This log was last generated on Mon, 28 Aug 2023 04:18:56 GMT and should not be manually modified.
+This log was last generated on Fri, 13 Oct 2023 04:17:18 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [3.0.0-beta.4](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.4)
+
+Fri, 13 Oct 2023 04:17:18 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.3..@fluentui/web-components_v3.0.0-beta.4)
+
+### Changes
+
+- fix: update switch to use margin instead of transform for the checked state to support RTL ([PR #29505](https://github.com/microsoft/fluentui/pull/29505) by chhol@microsoft.com)
+
+## [3.0.0-beta.3](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.3)
+
+Thu, 28 Sep 2023 04:18:49 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.2..@fluentui/web-components_v3.0.0-beta.3)
+
+### Changes
+
+- feat(menu): adds menu web component ([PR #27906](https://github.com/microsoft/fluentui/pull/27906) by brian.christopher.brady@gmail.com)
+
 ## [3.0.0-beta.2](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.2)
 
-Mon, 28 Aug 2023 04:18:56 GMT 
+Mon, 28 Aug 2023 04:19:02 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.1..@fluentui/web-components_v3.0.0-beta.2)
 
 ### Changes

package/dist/dts/index.d.ts

@@ -10,6 +10,7 @@ export * from './counter-badge/index.js';
 export * from './divider/index.js';
 export * from './image/index.js';
 export * from './label/index.js';
+export * from './menu/index.js';
 export * from './menu-button/index.js';
 export * from './menu-item/index.js';
 export * from './menu-list/index.js';

package/dist/dts/menu/define.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/dts/menu/index.d.ts

@@ -0,0 +1,4 @@
+export * from './menu.js';
+export { template as MenuTemplate } from './menu.template.js';
+export { styles as MenuStyles } from './menu.styles.js';
+export { definition as MenuDefinition } from './menu.definition.js';

package/dist/dts/menu/menu.d.ts

@@ -0,0 +1,194 @@
+import { FASTElement } from '@microsoft/fast-element';
+import { MenuList } from '../menu-list/menu-list.js';
+/**
+ * The Menu class represents a menu component.
+ * @public
+ */
+export declare class Menu extends FASTElement {
+    /**
+     * Determines if the menu should open on hover.
+     * @public
+     */
+    openOnHover?: boolean;
+    /**
+     * Determines if the menu should open on right click.
+     * @public
+     */
+    openOnContext?: boolean;
+    /**
+     * Determines if the menu should close on scroll.
+     * @public
+     */
+    closeOnScroll?: boolean;
+    /**
+     * Determines if the menu open state should persis on click of menu item
+     * @public
+     */
+    persistOnItemClick?: boolean;
+    /**
+     * Defines whether the menu is open or not.
+     * @public
+     */
+    open: boolean;
+    /**
+     * Holds the slotted menu list.
+     * @public
+     */
+    slottedMenuList: MenuList[];
+    /**
+     * Holds the slotted triggers.
+     * @public
+     */
+    slottedTriggers: HTMLElement[];
+    /**
+     * The positioning container of the menu.
+     * @internal
+     */
+    positioningContainer?: HTMLElement;
+    /**
+     * The trigger element of the menu.
+     * @private
+     */
+    private _trigger?;
+    /**
+     * The menu list element of the menu.
+     * @private
+     */
+    private _menuList?;
+    /**
+     * Holds a reference to a function that is used to cleanup resources.
+     * @public
+     */
+    cleanup?: () => void;
+    /**
+     * Called when the element is connected to the DOM.
+     * Sets up the component.
+     * @public
+     */
+    connectedCallback(): void;
+    /**
+     * Called when the element is disconnected from the DOM.
+     * Removes event listeners.
+     * @public
+     */
+    disconnectedCallback(): void;
+    /**
+     * Sets the component.
+     * Sets the trigger and menu list elements and adds event listeners.
+     * @public
+     */
+    setComponent(): void;
+    /**
+     * Toggles the open state of the menu.
+     * @public
+     */
+    toggleMenu: () => void;
+    /**
+     * Closes the menu.
+     * @public
+     */
+    closeMenu: () => void;
+    /**
+     * Opens the menu.
+     * @public
+     */
+    openMenu: (e?: Event) => void;
+    /**
+     * Focuses on the menu list.
+     * @public
+     */
+    focusMenuList(): void;
+    /**
+     * Focuses on the menu trigger.
+     * @public
+     */
+    focusTrigger(): void;
+    /**
+     * Called whenever the open state changes.
+     * Updates the 'aria-expanded' attribute and sets the positioning of the menu.
+     * Sets menu list position
+     * emits openChanged event
+     * @public
+     * @param {boolean} oldValue - The previous value of 'open'.
+     * @param {boolean} newValue - The new value of 'open'.
+     */
+    openChanged(oldValue: boolean, newValue: boolean): void;
+    /**
+     * Called whenever the 'openOnHover' property changes.
+     * Adds or removes a 'mouseover' event listener to the trigger based on the new value.
+     * @public
+     * @param {boolean} oldValue - The previous value of 'openOnHover'.
+     * @param {boolean} newValue - The new value of 'openOnHover'.
+     */
+    openOnHoverChanged(oldValue: boolean, newValue: boolean): void;
+    /**
+     * Called whenever the 'persistOnItemClick' property changes.
+     * Adds or removes a 'click' event listener to the menu list based on the new value.
+     * @public
+     * @param {boolean} oldValue - The previous value of 'persistOnItemClick'.
+     * @param {boolean} newValue - The new value of 'persistOnItemClick'.
+     */
+    persistOnItemClickChanged(oldValue: boolean, newValue: boolean): void;
+    /**
+     * Called whenever the 'openOnContext' property changes.
+     * Adds or removes a 'contextmenu' event listener to the trigger based on the new value.
+     * @public
+     * @param {boolean} oldValue - The previous value of 'openOnContext'.
+     * @param {boolean} newValue - The new value of 'openOnContext'.
+     */
+    openOnContextChanged(oldValue: boolean, newValue: boolean): void;
+    /**
+     * Called whenever the 'closeOnScroll' property changes.
+     * Adds or removes a 'closeOnScroll' event listener to the trigger based on the new value.
+     * @public
+     * @param {boolean} oldValue - The previous value of 'closeOnScroll'.
+     * @param {boolean} newValue - The new value of 'closeOnScroll'.
+     */
+    closeOnScrollChanged(oldValue: boolean, newValue: boolean): void;
+    /**
+     * The task to set the positioning of the menu.
+     * @protected
+     */
+    protected setPositioningTask: () => void;
+    /**
+     * Sets the positioning of the menu.
+     * @protected
+     */
+    protected setPositioning(): void;
+    /**
+     * Adds event listeners.
+     * Adds click and keydown event listeners to the trigger and a click event listener to the document.
+     * If 'openOnHover' is true, adds a 'mouseover' event listener to the trigger.
+     * @public
+     */
+    private addListeners;
+    /**
+     * Removes event listeners.
+     * Removes click and keydown event listeners from the trigger and a click event listener from the document.
+     * Also removes 'mouseover' event listeners from the trigger.
+     * @private
+     */
+    private removeListeners;
+    /**
+     * Handles keyboard interaction for the menu.
+     * Closes the menu and focuses on the trigger when the Escape key is pressed.
+     * Closes the menu when the Tab key is pressed.
+     * @public
+     * @param {KeyboardEvent} e - the keyboard event
+     */
+    handleMenuKeydown(e: KeyboardEvent): boolean | void;
+    /**
+     * Handles keyboard interaction for the trigger.
+     * Toggles the menu when the Space or Enter key is pressed.
+     * If the menu is open, focuses on the menu list.
+     * @public
+     * @param {KeyboardEvent} e - the keyboard event
+     */
+    handleTriggerKeydown: (e: KeyboardEvent) => boolean | void;
+    /**
+     * Handles document click events to close the menu when a click occurs outside of the menu or the trigger.
+     * @private
+     * @param {Event} e - The event triggered on document click.
+     */
+    private handleDocumentClick;
+}

package/dist/dts/menu/menu.definition.d.ts

@@ -0,0 +1,9 @@
+import { Menu } from './menu.js';
+/**
+ * The Fluent Menu Element.
+ *
+ * @public
+ * @remarks
+ * HTML Element: <fluent-menu>
+ */
+export declare const definition: import("@microsoft/fast-element").FASTElementDefinition<typeof Menu>;

package/dist/dts/menu/menu.styles.d.ts

@@ -0,0 +1,4 @@
+/** Menu styles
+ * @public
+ */
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/dts/menu/menu.template.d.ts

@@ -0,0 +1,4 @@
+import { ElementViewTemplate } from '@microsoft/fast-element';
+import type { Menu } from './menu.js';
+export declare function menuTemplate<T extends Menu>(): ElementViewTemplate<T>;
+export declare const template: ElementViewTemplate<Menu>;

package/dist/esm/index.js

@@ -10,6 +10,7 @@ export * from './counter-badge/index.js';
 export * from './divider/index.js';
 export * from './image/index.js';
 export * from './label/index.js';
+export * from './menu/index.js';
 export * from './menu-button/index.js';
 export * from './menu-item/index.js';
 export * from './menu-list/index.js';

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,0BAA0B,CAAC;AACzC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AAEzC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,0BAA0B,CAAC;AACzC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AAEzC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,kBAAkB,CAAC"}

package/dist/esm/menu/define.js

@@ -0,0 +1,4 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { definition } from './menu.definition.js';
+definition.define(FluentDesignSystem.registry);
+//# sourceMappingURL=define.js.map

package/dist/esm/menu/define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/menu/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC"}

package/dist/esm/menu/index.js

@@ -0,0 +1,5 @@
+export * from './menu.js';
+export { template as MenuTemplate } from './menu.template.js';
+export { styles as MenuStyles } from './menu.styles.js';
+export { definition as MenuDefinition } from './menu.definition.js';
+//# sourceMappingURL=index.js.map

package/dist/esm/menu/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/menu/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,OAAO,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/esm/menu/menu.definition.js

@@ -0,0 +1,17 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { Menu } from './menu.js';
+import { styles } from './menu.styles.js';
+import { template } from './menu.template.js';
+/**
+ * The Fluent Menu Element.
+ *
+ * @public
+ * @remarks
+ * HTML Element: <fluent-menu>
+ */
+export const definition = Menu.compose({
+    name: `${FluentDesignSystem.prefix}-menu`,
+    template,
+    styles,
+});
+//# sourceMappingURL=menu.definition.js.map

package/dist/esm/menu/menu.definition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.definition.js","sourceRoot":"","sources":["../../../src/menu/menu.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAE9C;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC;IACrC,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,OAAO;IACzC,QAAQ;IACR,MAAM;CACP,CAAC,CAAC"}