@fluentui/web-components 3.0.0-beta.1 → 3.0.0-beta.100

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

@@ -1,9 +1,145 @@
-import { FASTMenuItem, MenuItemRole } from '@microsoft/fast-foundation/menu-item.js';
-export declare type MenuItemColumnCount = 0 | 1 | 2;
-export { MenuItemRole };
+import { FASTElement } from '@microsoft/fast-element';
+import type { StartEndOptions } from '../patterns/start-end.js';
+import { StartEnd } from '../patterns/start-end.js';
+import type { StaticallyComposableHTML } from '../utils/template-helpers.js';
+import { MenuItemRole, roleForMenuItem } from './menu-item.options.js';
+export type MenuItemColumnCount = 0 | 1 | 2;
+export { MenuItemRole, roleForMenuItem };
 /**
- * The base class used for constructing a fluent-menu-item custom element
+ * Menu Item configuration options
  * @public
  */
-export declare class MenuItem extends FASTMenuItem {
+export type MenuItemOptions = StartEndOptions<MenuItem> & {
+    indicator?: StaticallyComposableHTML<MenuItem>;
+    submenuGlyph?: StaticallyComposableHTML<MenuItem>;
+};
+/**
+ * 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 }.
+ *
+ * @tag fluent-menu-item
+ *
+ * @slot indicator - The checkbox or radio indicator
+ * @slot start - Content which can be provided before the menu item content
+ * @slot - The default slot for menu item content
+ * @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 content - The element wrapping the menu item content
+ * @fires change - Fires a custom 'change' event when a non-submenu item with a role of `menuitemcheckbox`, `menuitemradio`, or `menuitem` is invoked
+ *
+ * @public
+ */
+export declare class MenuItem extends FASTElement {
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
+    /**
+     * The disabled state of the element.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: disabled
+     */
+    disabled: boolean;
+    /**
+     * Handles changes to disabled attribute custom states and element internals
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    disabledChanged(prev: boolean | undefined, next: boolean | undefined): void;
+    /**
+     * The role of the element.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: role
+     */
+    role: MenuItemRole;
+    /**
+     * Handles changes to role attribute element internals properties
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    roleChanged(prev: MenuItemRole | undefined, next: MenuItemRole | undefined): void;
+    /**
+     * The checked value of the element.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: checked
+     */
+    checked: boolean;
+    /**
+     * Handles changes to checked attribute custom states and element internals
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    protected checkedChanged(prev: boolean, next: boolean): void;
+    /**
+     * The hidden attribute.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: hidden
+     */
+    hidden: boolean;
+    /**
+     * The submenu slotted content.
+     *
+     * @internal
+     */
+    slottedSubmenu: HTMLElement[];
+    /**
+     * Sets the submenu and updates its position.
+     *
+     * @internal
+     */
+    protected slottedSubmenuChanged(prev: HTMLElement[] | undefined, next: HTMLElement[]): void;
+    /**
+     * @internal
+     */
+    submenu: HTMLElement | undefined;
+    connectedCallback(): void;
+    /**
+     * @internal
+     */
+    handleMenuItemKeyDown: (e: KeyboardEvent) => boolean;
+    /**
+     * @internal
+     */
+    handleMenuItemClick: (e: MouseEvent) => boolean;
+    /**
+     * @internal
+     */
+    handleMouseOver: (e: MouseEvent) => boolean;
+    /**
+     * @internal
+     */
+    handleMouseOut: (e: MouseEvent) => boolean;
+    /**
+     * Setup required ARIA on open/close
+     * @internal
+     */
+    toggleHandler: (e: Event) => void;
+    /**
+     * @internal
+     */
+    private invoke;
+    /**
+     * Set fallback position of menu on open when CSS anchor not supported
+     * @internal
+     */
+    setSubmenuPosition: () => void;
+}
+/**
+ * Mark internal because exporting class and interface of the same name
+ * confuses API documenter.
+ * TODO: https://github.com/microsoft/fast/issues/3317
+ * @internal
+ */
+export interface MenuItem extends StartEnd {
 }

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

@@ -1,9 +1,5 @@
 import { MenuItem } from './menu-item.js';
 /**
- * The Fluent Menu Item Element. Implements {@link @microsoft/fast-foundation#MenuItem },
- * {@link @microsoft/fast-foundation#menuItemTemplate}
- *
- *
  * @public
  * @remarks
  * HTML Element: <fluent-menu-item>

package/dist/dts/menu-item/menu-item.options.d.ts

@@ -0,0 +1,30 @@
+import type { ValuesOf } from '../utils/index.js';
+/**
+ * Menu items roles.
+ * @public
+ */
+export declare const MenuItemRole: {
+    /**
+     * The menu item has a "menuitem" role
+     */
+    readonly menuitem: "menuitem";
+    /**
+     * The menu item has a "menuitemcheckbox" role
+     */
+    readonly menuitemcheckbox: "menuitemcheckbox";
+    /**
+     * The menu item has a "menuitemradio" role
+     */
+    readonly menuitemradio: "menuitemradio";
+};
+/**
+ * The types for menu item roles
+ * @public
+ */
+export type MenuItemRole = ValuesOf<typeof MenuItemRole>;
+/**
+ * @internal
+ */
+export declare const roleForMenuItem: {
+    [value in keyof typeof MenuItemRole]: (typeof MenuItemRole)[value];
+};

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

@@ -1,3 +1,4 @@
 import type { ElementViewTemplate } from '@microsoft/fast-element';
-import type { MenuItem } from './menu-item.js';
+import type { MenuItem, MenuItemOptions } from './menu-item.js';
+export declare function menuItemTemplate<T extends MenuItem>(options?: MenuItemOptions): ElementViewTemplate<T>;
 export declare const template: ElementViewTemplate<MenuItem>;

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

@@ -1,4 +1,4 @@
-export * from './menu-list.js';
+export { MenuList } from './menu-list.js';
 export { template as MenuListTemplate } from './menu-list.template.js';
 export { styles as MenuListStyles } from './menu-list.styles.js';
 export { definition as MenuListDefinition } from './menu-list.definition.js';

package/dist/dts/menu-list/menu-list.bench.d.ts

@@ -0,0 +1,3 @@
+declare const itemRenderer: () => HTMLElement;
+export default itemRenderer;
+export { tests } from '../utils/benchmark-wrapper.js';

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

@@ -1,9 +1,80 @@
-import { FASTMenu } from '@microsoft/fast-foundation/menu.js';
+import { FASTElement } from '@microsoft/fast-element';
 /**
- * The base class used for constructing a fluent-menu-list custom element
+ * A Menu Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#menu | ARIA menu }.
+ *
+ * @tag fluent-menu-list
+ *
+ * @slot - The default slot for the menu items
+ *
  * @public
  */
-export declare class MenuList extends FASTMenu {
-    protected setItems(): void;
+export declare class MenuList extends FASTElement {
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
+    /**
+     * @internal
+     */
+    items: HTMLElement[];
+    protected itemsChanged(oldValue: HTMLElement[], newValue: HTMLElement[]): void;
+    protected menuItems: Element[] | undefined;
+    /**
+     * The index of the focusable element in the items array
+     * defaults to -1
+     */
+    private focusIndex;
+    private static focusableElementRoles;
+    constructor();
+    /**
+     * @internal
+     */
+    connectedCallback(): void;
+    /**
+     * @internal
+     */
+    disconnectedCallback(): void;
+    /**
+     * @internal
+     */
+    readonly isNestedMenu: () => boolean;
+    /**
+     * Focuses the first item in the menu.
+     *
+     * @public
+     */
+    focus(): void;
+    /**
+     * @internal
+     */
+    handleMenuKeyDown(e: KeyboardEvent): void | boolean;
+    /**
+     * if focus is moving out of the menu, reset to a stable initial state
+     * @internal
+     */
+    handleFocusOut: (e: FocusEvent) => void;
+    private handleItemFocus;
+    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 MenuItem element and set radio group behavior
+     */
+    private changedMenuItemHandler;
+    /**
+     * check if the item is a menu item
+     */
+    protected isMenuItemElement: (el: Element) => el is HTMLElement;
+    /**
+     * check if the item is focusable
+     */
+    private isFocusableElement;
+    private setFocus;
 }

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

@@ -1,9 +1,5 @@
 import { MenuList } from './menu-list.js';
 /**
- * The Fluent MenuList Element. Implements {@link @microsoft/fast-foundation#Menu },
- * {@link @microsoft/fast-foundation#menuTemplate}
- *
- *
  * @public
  * @remarks
  * HTML Element: <fluent-menu-list>

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

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

package/dist/dts/message-bar/define.d.ts

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

package/dist/dts/message-bar/index.d.ts

@@ -0,0 +1,5 @@
+export { definition as MessageBarDefinition } from './message-bar.definition.js';
+export { MessageBar } from './message-bar.js';
+export { MessageBarIntent, MessageBarLayout, MessageBarShape } from './message-bar.options.js';
+export { styles as MessageBarStyles } from './message-bar.styles.js';
+export { template as MessageBarTemplate } from './message-bar.template.js';

package/dist/dts/message-bar/message-bar.bench.d.ts

@@ -0,0 +1,3 @@
+declare const itemRenderer: () => HTMLElement;
+export default itemRenderer;
+export { tests } from '../utils/benchmark-wrapper.js';

package/dist/dts/message-bar/message-bar.d.ts

@@ -0,0 +1,50 @@
+import { FASTElement } from '@microsoft/fast-element';
+import { MessageBarIntent, MessageBarLayout, MessageBarShape } from './message-bar.options.js';
+/**
+ * A Message Bar Custom HTML Element.
+ *
+ * @tag fluent-message-bar
+ *
+ * @slot actions - Content that can be provided for the actions
+ * @slot dismiss - Content that can be provided for the dismiss button
+ * @slot - The default slot for the content
+ * @public
+ */
+export declare class MessageBar extends FASTElement {
+    /**
+     * The internal {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
+    constructor();
+    /**
+     * Sets the shape of the Message Bar.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `shape`
+     */
+    shape?: MessageBarShape;
+    /**
+     * Sets the layout of the control.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `layout`
+     */
+    layout?: MessageBarLayout;
+    /**
+     * Sets the intent of the control.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `intent`
+     */
+    intent?: MessageBarIntent;
+    /**
+     * @public
+     * Method to emit a `dismiss` event when the message bar is dismissed
+     */
+    dismissMessageBar: () => void;
+}

package/dist/dts/message-bar/message-bar.definition.d.ts

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

package/dist/dts/message-bar/message-bar.options.d.ts

@@ -0,0 +1,30 @@
+import type { ValuesOf } from '../utils/typings.js';
+/**
+ * @public
+ * The `layout` variations for the MessageBar component.
+ */
+export declare const MessageBarLayout: {
+    readonly multiline: "multiline";
+    readonly singleline: "singleline";
+};
+export type MessageBarLayout = ValuesOf<typeof MessageBarLayout>;
+/**
+ * @public
+ * The `shape` variations for the MessageBar component.
+ */
+export declare const MessageBarShape: {
+    readonly rounded: "rounded";
+    readonly square: "square";
+};
+export type MessageBarShape = ValuesOf<typeof MessageBarShape>;
+/**
+ * @public
+ * The `intent` variations for the MessageBar component.
+ */
+export declare const MessageBarIntent: {
+    readonly success: "success";
+    readonly warning: "warning";
+    readonly error: "error";
+    readonly info: "info";
+};
+export type MessageBarIntent = ValuesOf<typeof MessageBarIntent>;

package/dist/dts/message-bar/message-bar.styles.d.ts

@@ -0,0 +1,7 @@
+import type { ElementStyles } from '@microsoft/fast-element';
+/**
+ * Styles for the MessageBar component.
+ *
+ * @public
+ */
+export declare const styles: ElementStyles;

package/dist/dts/message-bar/message-bar.template.d.ts

@@ -0,0 +1,14 @@
+import { type ElementViewTemplate } from '@microsoft/fast-element';
+import type { MessageBar } from './message-bar.js';
+/**
+ * Generates a template for the MessageBar component.
+ * @public
+ * @param {MessageBar} T - The type of the MessageBar.
+ * @returns {ElementViewTemplate<T>} - The template for the MessageBar component.
+ */
+export declare function messageBarTemplate<T extends MessageBar>(): ElementViewTemplate<T>;
+/**
+ * The template for the MessageBar component.
+ * @type {ElementViewTemplate<MessageBar>}
+ */
+export declare const template: ElementViewTemplate<MessageBar>;

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

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

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

@@ -0,0 +1,5 @@
+export { definition as DropdownOptionDefinition } from './option.definition.js';
+export { DropdownOption } from './option.js';
+export { isDropdownOption, type DropdownOptionOptions } from './option.options.js';
+export { styles as DropdownOptionStyles } from './option.styles.js';
+export { template as DropdownOptionTemplate } from './option.template.js';