@fluentui/web-components 3.0.0-beta.33 → 3.0.0-beta.35

package/dist/web-components.d.ts

@@ -1,3 +1,5 @@
+/// <reference types="web" />
+
 import type { Constructable } from '@microsoft/fast-element';
 import { CSSDirective } from '@microsoft/fast-element';
 import { Direction } from '@microsoft/fast-web-utilities';
@@ -5538,7 +5540,42 @@ export declare class MatchMediaStyleSheetBehavior extends MatchMediaBehavior {
 export declare type MediaQueryListListener = (this: MediaQueryList, ev?: MediaQueryListEvent) => void;
 
 /**
- * The Menu class represents a menu component.
+ * A Menu component that provides a customizable menu element.
+ * @class Menu
+ * @extends FASTElement
+ *
+ * @attr open-on-hover - Determines if the menu should open on hover.
+ * @attr open-on-context - Determines if the menu should open on right click.
+ * @attr close-on-scroll - Determines if the menu should close on scroll.
+ * @attr persist-on-item-click - Determines if the menu open state should persist on click of menu item.
+ *
+ * @cssproperty --menu-max-height - The max-height of the menu.
+ *
+ * @slot trigger - Slot for the trigger elements.
+ * @slot - Default slot for the menu list.
+ *
+ * @method connectedCallback - Called when the element is connected to the DOM. Sets up the component.
+ * @method disconnectedCallback - Called when the element is disconnected from the DOM. Removes event listeners.
+ * @method setComponent - Sets the component state.
+ * @method toggleMenu - Toggles the open state of the menu.
+ * @method closeMenu - Closes the menu.
+ * @method openMenu - Opens the menu.
+ * @method focusMenuList - Focuses on the menu list.
+ * @method focusTrigger - Focuses on the menu trigger.
+ * @method openOnHoverChanged - Called whenever the 'openOnHover' property changes.
+ * @method persistOnItemClickChanged - Called whenever the 'persistOnItemClick' property changes.
+ * @method openOnContextChanged - Called whenever the 'openOnContext' property changes.
+ * @method closeOnScrollChanged - Called whenever the 'closeOnScroll' property changes.
+ * @method addListeners - Adds event listeners.
+ * @method removeListeners - Removes event listeners.
+ * @method menuKeydownHandler - Handles keyboard interaction for the menu.
+ * @method triggerKeydownHandler - Handles keyboard interaction for the trigger.
+ * @method documentClickHandler - Handles document click events to close the menu when a click occurs outside of the menu or the trigger.
+ *
+ * @summary The Menu component functions as a customizable menu element.
+ *
+ * @tag fluent-menu
+ *
  * @public
  */
 export declare class Menu extends FASTElement {
@@ -5562,11 +5599,6 @@ export declare class Menu extends FASTElement {
      * @public
      */
     persistOnItemClick?: boolean;
-    /**
-     * Defines whether the menu is open or not.
-     * @public
-     */
-    open: boolean;
     /**
      * Holds the slotted menu list.
      * @public
@@ -5578,25 +5610,20 @@ export declare class Menu extends FASTElement {
      */
     slottedTriggers: HTMLElement[];
     /**
-     * The positioning container of the menu.
+     * Defines whether the menu is open or not.
      * @internal
      */
-    positioningContainer?: HTMLElement;
+    private _open;
     /**
      * The trigger element of the menu.
      * @internal
      */
     private _trigger?;
     /**
-     * The menu list element of the menu.
+     * The menu list element of the menu which has the popover behavior.
      * @internal
      */
     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.
@@ -5641,16 +5668,12 @@ export declare class Menu extends FASTElement {
      */
     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
-     *
-     * @param oldValue - The previous value of 'open'.
-     * @param newValue - The new value of 'open'.
+     * Handles the 'toggle' event on the popover.
      * @public
+     * @param e - the event
+     * @returns void
      */
-    openChanged(oldValue: boolean, newValue: boolean): void;
+    toggleHandler: (e: Event | ToggleEvent) => void;
     /**
      * Called whenever the 'openOnHover' property changes.
      * Adds or removes a 'mouseover' event listener to the trigger based on the new value.
@@ -5684,27 +5707,21 @@ export declare class Menu extends FASTElement {
      * @param newValue - The new value of 'closeOnScroll'.
      */
     closeOnScrollChanged(oldValue: boolean, newValue: boolean): void;
-    /**
-     * The task to set the positioning of the menu.
-     * @internal
-     */
-    protected setPositioningTask: () => void;
-    /**
-     * Sets the positioning of the menu.
-     * @internal
-     */
-    protected setPositioning(): void;
     /**
      * Adds event listeners.
-     * Adds click and keydown event listeners to the trigger and a click event listener to the document.
+     * Adds click and keydown event listeners to the trigger.
+     * Adds a 'toggle' event listener to the menu list.
      * If 'openOnHover' is true, adds a 'mouseover' event listener to the trigger.
-     * @public
+     * If 'openOnContext' is true, adds a 'contextmenu' event listener to the trigger and a document 'click' event listener.
+     * @internal
      */
     private addListeners;
     /**
      * Removes event listeners.
-     * Removes click and keydown event listeners from the trigger and a click event listener from the document.
+     * Removes click and keydown event listeners from the trigger.
+     * Also removes toggle event listener from the menu list.
      * Also removes 'mouseover' event listeners from the trigger.
+     * Also removes 'contextmenu' event listeners from the trigger and document 'click' event listeners.
      * @internal
      */
     private removeListeners;
@@ -5715,7 +5732,7 @@ export declare class Menu extends FASTElement {
      * @param e - the keyboard event
      * @public
      */
-    handleMenuKeydown(e: KeyboardEvent): boolean | void;
+    menuKeydownHandler(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.
@@ -5723,13 +5740,13 @@ export declare class Menu extends FASTElement {
      * @param e - the keyboard event
      * @public
      */
-    handleTriggerKeydown: (e: KeyboardEvent) => boolean | void;
+    triggerKeydownHandler: (e: KeyboardEvent) => boolean | void;
     /**
-     * Handles document click events to close the menu when a click occurs outside of the menu or the trigger.
+     * Handles document click events to close a menu opened with contextmenu in popover="manual" mode.
      * @internal
      * @param e - The event triggered on document click.
      */
-    private handleDocumentClick;
+    private documentClickHandler;
 }
 
 /**
@@ -5814,21 +5831,13 @@ export declare const MenuDefinition: FASTElementDefinition<typeof Menu>;
  * A Switch Custom HTML Element.
  * Implements {@link https://www.w3.org/TR/wai-aria-1.1/#menuitem | ARIA menuitem }, {@link https://www.w3.org/TR/wai-aria-1.1/#menuitemcheckbox | ARIA menuitemcheckbox}, or {@link https://www.w3.org/TR/wai-aria-1.1/#menuitemradio | ARIA menuitemradio }.
  *
- * @slot checked-indicator - The checked indicator
- * @slot radio-indicator - The radio indicator
+ * @slot indicator - The checkbox or radio indicator
  * @slot start - Content which can be provided before the menu item content
- * @slot end - Content which can be provided after the menu item content
  * @slot - The default slot for menu item content
- * @slot expand-collapse-indicator - The expand/collapse indicator
+ * @slot end - Content which can be provided after the menu item content
+ * @slot submenu-glyph - The submenu expand/collapse indicator
  * @slot submenu - Used to nest menu's within menu items
- * @csspart input-container - The element representing the visual checked or radio indicator
- * @csspart checkbox - The element wrapping the `menuitemcheckbox` indicator
- * @csspart radio - The element wrapping the `menuitemradio` indicator
  * @csspart content - The element wrapping the menu item content
- * @csspart expand-collapse-glyph-container - The element wrapping the expand collapse element
- * @csspart expand-collapse - The expand/collapse element
- * @csspart submenu-region - The container for the submenu, used for positioning
- * @fires expanded-change - Fires a custom 'expanded-change' event when the expanded state changes
  * @fires change - Fires a custom 'change' event when a non-submenu item with a role of `menuitemcheckbox`, `menuitemradio`, or `menuitem` is invoked
  *
  * @public
@@ -5842,15 +5851,6 @@ export declare class MenuItem extends FASTElement {
      * HTML Attribute: disabled
      */
     disabled: boolean;
-    /**
-     * The expanded state of the element.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: expanded
-     */
-    expanded: boolean;
-    protected expandedChanged(prev: boolean | undefined, next: boolean): void;
     /**
      * The role of the element.
      *
@@ -5859,12 +5859,6 @@ export declare class MenuItem extends FASTElement {
      * HTML Attribute: role
      */
     role: MenuItemRole;
-    /**
-     * Cleanup function for the submenu positioner.
-     *
-     * @public
-     */
-    cleanup: () => void;
     /**
      * The checked value of the element.
      *
@@ -5888,31 +5882,16 @@ export declare class MenuItem extends FASTElement {
      * @internal
      */
     slottedSubmenu: HTMLElement[];
-    /**
-     * @internal
-     */
-    get hasSubmenu(): boolean;
     /**
      * Sets the submenu and updates its position.
      *
      * @internal
      */
     protected slottedSubmenuChanged(prev: HTMLElement[] | undefined, next: HTMLElement[]): void;
-    /**
-     * The container for the submenu.
-     *
-     * @internal
-     */
-    submenuContainer: HTMLDivElement;
     /**
      * @internal
      */
     submenu: HTMLElement | undefined;
-    private focusSubmenuOnLoad;
-    /**
-     * @internal
-     */
-    disconnectedCallback(): void;
     /**
      * @internal
      */
@@ -5921,10 +5900,6 @@ export declare class MenuItem extends FASTElement {
      * @internal
      */
     handleMenuItemClick: (e: MouseEvent) => boolean;
-    /**
-     * @internal
-     */
-    submenuLoaded: () => void;
     /**
      * @internal
      */
@@ -5934,23 +5909,19 @@ export declare class MenuItem extends FASTElement {
      */
     handleMouseOut: (e: MouseEvent) => boolean;
     /**
+     * Setup required ARIA on open/close
      * @internal
      */
-    private closeSubMenu;
-    /**
-     * @internal
-     */
-    private expandAndFocus;
+    toggleHandler: (e: ToggleEvent | Event) => void;
     /**
      * @internal
      */
     private invoke;
     /**
-     * Calculate and apply submenu positioning.
-     *
-     * @public
+     * Set fallback position of menu on open when CSS anchor not supported
+     * @internal
      */
-    updateSubmenu(): void;
+    setSubmenuPosition: () => void;
 }
 
 /**
@@ -5976,9 +5947,8 @@ export declare const MenuItemDefinition: FASTElementDefinition<typeof MenuItem>;
  * @public
  */
 export declare type MenuItemOptions = StartEndOptions<MenuItem> & {
-    checkboxIndicator?: StaticallyComposableHTML<MenuItem>;
-    expandCollapseGlyph?: StaticallyComposableHTML<MenuItem>;
-    radioIndicator?: StaticallyComposableHTML<MenuItem>;
+    indicator?: StaticallyComposableHTML<MenuItem>;
+    submenuGlyph?: StaticallyComposableHTML<MenuItem>;
 };
 
 /**
@@ -6028,7 +5998,6 @@ export declare class MenuList extends FASTElement {
     items: HTMLElement[];
     protected itemsChanged(oldValue: HTMLElement[], newValue: HTMLElement[]): void;
     protected menuItems: Element[] | undefined;
-    private expandedItem;
     /**
      * The index of the focusable element in the items array
      * defaults to -1
@@ -6053,12 +6022,6 @@ export declare class MenuList extends FASTElement {
      * @public
      */
     focus(): void;
-    /**
-     * Collapses any expanded menu items.
-     *
-     * @public
-     */
-    collapseExpandedItem(): void;
     /**
      * @internal
      */
@@ -6069,15 +6032,17 @@ export declare class MenuList extends FASTElement {
      */
     handleFocusOut: (e: FocusEvent) => void;
     private handleItemFocus;
-    private handleExpandedChanged;
     private removeItemListeners;
     private static elementIndent;
     protected setItems(): void;
+    /**
+     * Method for Observable changes to the hidden attribute of child elements
+     */
     handleChange(source: any, propertyName: string): void;
     /**
-     * handle change from child element
+     * Handle change from child MenuItem element and set radio group behavior
      */
-    private changeHandler;
+    private changedMenuItemHandler;
     /**
      * check if the item is a menu item
      */
@@ -7384,6 +7349,12 @@ export declare const TabTemplate: ElementViewTemplate<Tab, any>;
  * @public
  */
 declare class Text_2 extends FASTElement {
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
     /**
      * The text will not wrap
      * NOTE: In Fluent UI React v9 this is "wrap"
@@ -7443,6 +7414,12 @@ declare class Text_2 extends FASTElement {
      *
      */
     size?: TextSize;
+    /**
+     * Handles changes to size attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    sizeChanged(prev: TextSize | undefined, next: TextSize | undefined): void;
     /**
      * THe Text font
      *
@@ -7452,13 +7429,25 @@ declare class Text_2 extends FASTElement {
      */
     font?: TextFont;
     /**
-     * THe Text weight
+     * Handles changes to font attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    fontChanged(prev: TextFont | undefined, next: TextFont | undefined): void;
+    /**
+     * The Text weight
      *
      * @public
      * @remarks
      * HTML Attribute: weight
      */
     weight?: TextWeight;
+    /**
+     * Handles changes to weight attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    weightChanged(prev: TextWeight | undefined, next: TextWeight | undefined): void;
     /**
      * THe Text align
      *
@@ -7467,6 +7456,21 @@ declare class Text_2 extends FASTElement {
      * HTML Attribute: align
      */
     align?: TextAlign;
+    /**
+     * Handles changes to align attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    alignChanged(prev: TextAlign | undefined, next: TextAlign | undefined): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Handles changes to observable properties
+     * @internal
+     * @param source - the source of the change
+     * @param propertyName - the property name being changed
+     */
+    handleChange(source: any, propertyName: string): void;
 }
 export { Text_2 as Text }