@fluentui/web-components 3.0.0-beta.22 → 3.0.0-beta.24

package/dist/web-components.d.ts

@@ -1,5 +1,3 @@
-/// <reference types="web" />
-
 import type { Constructable } from '@microsoft/fast-element';
 import { CSSDirective } from '@microsoft/fast-element';
 import { Direction } from '@microsoft/fast-web-utilities';
@@ -4215,36 +4213,11 @@ declare interface DelegatesARIALink extends ARIAGlobalStatesAndProperties {
  * @public
  */
 export declare class Dialog extends FASTElement {
-    /**
-     * @internal
-     * Indicates whether focus is being trapped within the dialog
-     */
-    private isTrappingFocus;
-    /**
-     * @public
-     * Lifecycle method called when the element is connected to the DOM
-     */
-    connectedCallback(): void;
-    /**
-     * @public
-     * Lifecycle method called when the element is disconnected from the DOM
-     */
-    disconnectedCallback(): void;
     /**
      * @public
      * The dialog element
      */
     dialog: HTMLDialogElement;
-    /**
-     * @public
-     * The title action elements
-     */
-    titleAction: HTMLElement[];
-    /**
-     * @public
-     * The default title action button
-     */
-    defaultTitleAction?: Button;
     /**
      * @public
      * The ID of the element that describes the dialog
@@ -4259,43 +4232,19 @@ export declare class Dialog extends FASTElement {
      * @public
      * The type of the dialog modal
      */
-    modalType: DialogModalType;
-    /**
-     * @public
-     * Indicates whether the dialog is open
-     */
-    open: boolean;
-    /**
-     * @public
-     * Indicates whether the dialog has a title action
-     */
-    noTitleAction: boolean;
-    /**
-     * @internal
-     * Indicates whether focus should be trapped within the dialog
-     */
-    private trapFocus;
-    /**
-     * @public
-     * Method called when the 'open' attribute changes
-     */
-    openChanged(oldValue: boolean, newValue: boolean): void;
+    type: DialogType;
     /**
      * @public
-     * Method called when the 'modalType' attribute changes
+     * Method to emit an event before the dialog's open state changes
+     * HTML spec proposal: https://github.com/whatwg/html/issues/9733
      */
-    modalTypeChanged(oldValue: DialogModalType, newValue: DialogModalType): void;
+    emitBeforeToggle: () => void;
     /**
      * @public
-     * Method to set the component's state based on its attributes
+     * Method to emit an event after the dialog's open state changes
+     * HTML spec proposal: https://github.com/whatwg/html/issues/9733
      */
-    setComponent(): void;
-    /**
-     * @public
-     * Method to emit an event when the dialog's open state changes
-     * @param dismissed - Indicates whether the dialog was dismissed
-     */
-    onOpenChangeEvent: (dismissed?: boolean) => void;
+    emitToggle: () => void;
     /**
      * @public
      * Method to show the dialog
@@ -4304,120 +4253,59 @@ export declare class Dialog extends FASTElement {
     /**
      * @public
      * Method to hide the dialog
-     * @param dismissed - Indicates whether the dialog was dismissed
-     */
-    hide(dismissed?: boolean): void;
-    /**
-     * @public
-     * Method to dismiss the dialog
      */
-    dismiss(): void;
+    hide(): void;
     /**
      * @public
-     * Handles click events on the dialog
+     * Handles click events on the dialog overlay for light-dismiss
      * @param event - The click event
      * @returns boolean
      */
-    handleClick(event: Event): boolean;
+    clickHandler(event: Event): boolean;
+}
+
+/**
+ * Dialog Body component that extends the FASTElement class.
+ *
+ * @public
+ * @extends FASTElement
+ */
+export declare class DialogBody extends FASTElement {
     /**
      * @public
-     * Handles keydown events on the dialog
-     * @param e - The keydown event
-     * @returns boolean | void
-     */
-    handleKeydown: (e: KeyboardEvent) => boolean | void;
-    /**
-     * @internal
-     * Handles keydown events on the document
-     * @param e - The keydown event
-     */
-    private handleDocumentKeydown;
-    /**
-     * @internal
-     * Handles tab keydown events
-     * @param e - The keydown event
-     */
-    private handleTabKeyDown;
-    /**
-     * @internal
-     * Gets the bounds of the tab queue
-     * @returns (HTMLElement | SVGElement)[]
-     */
-    private getTabQueueBounds;
-    /**
-     * @internal
-     * Focuses the first element in the tab queue
-     */
-    private focusFirstElement;
-    /**
-     * @internal
-     * Determines if focus should be forced
-     * @param currentFocusElement - The currently focused element
-     * @returns boolean
-     */
-    private shouldForceFocus;
-    /**
-     * @internal
-     * Determines if focus should be trapped
-     * @returns boolean
-     */
-    private shouldTrapFocus;
-    /**
-     * @internal
-     * Handles focus events on the document
-     * @param e - The focus event
-     */
-    private handleDocumentFocus;
-    /**
-     * @internal
-     * Updates the state of focus trapping
-     * @param shouldTrapFocusOverride - Optional override for whether focus should be trapped
-     */
-    private updateTrapFocus;
-    /**
-     * @internal
-     * Reduces the list of tabbable items
-     * @param elements - The current list of elements
-     * @param element - The element to consider adding to the list
-     * @returns HTMLElement[]
-     */
-    private static reduceTabbableItems;
-    /**
-     * @internal
-     * Determines if an element is a focusable FASTElement
-     * @param element - The element to check
-     * @returns boolean
-     */
-    private static isFocusableFastElement;
-    /**
-     * @internal
-     * Determines if an element has a tabbable shadow
-     * @param element - The element to check
-     * @returns boolean
+     * Indicates whether the dialog has a title action
      */
-    private static hasTabbableShadow;
+    noTitleAction: boolean;
 }
 
 /**
- * The Fluent Dialog Element
+ * The Fluent Dialog Body Element
  *
  * @public
  * @remarks
- * HTML Element: \<fluent-dialog\>
+ * HTML Element: \<fluent-dialog-body\>
  */
-export declare const DialogDefinition: FASTElementDefinition<typeof Dialog>;
+export declare const DialogBodyDefinition: FASTElementDefinition<typeof DialogBody>;
+
+/** Dialog Body styles
+ * @public
+ */
+export declare const DialogBodyStyles: ElementStyles;
 
 /**
- * Dialog modal type
+ * Template for the dialog form
  * @public
  */
-export declare const DialogModalType: {
-    readonly modal: "modal";
-    readonly nonModal: "non-modal";
-    readonly alert: "alert";
-};
+export declare const DialogBodyTemplate: ElementViewTemplate;
 
-export declare type DialogModalType = ValuesOf<typeof DialogModalType>;
+/**
+ * The Fluent Dialog Element
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-dialog\>
+ */
+export declare const DialogDefinition: FASTElementDefinition<typeof Dialog>;
 
 /** Dialog styles
  * @public
@@ -4430,6 +4318,18 @@ export declare const DialogStyles: ElementStyles;
  */
 export declare const DialogTemplate: ElementViewTemplate<Dialog>;
 
+/**
+ * Dialog modal type
+ * @public
+ */
+export declare const DialogType: {
+    readonly modal: "modal";
+    readonly nonModal: "non-modal";
+    readonly alert: "alert";
+};
+
+export declare type DialogType = ValuesOf<typeof DialogType>;
+
 /**
  * Applies a CSS display property.
  * Also adds CSS rules to not display the element when the [hidden] attribute is applied to the element.