@fluentui/web-components 3.0.0-beta.5 → 3.0.0-beta.7

package/CHANGELOG.md

@@ -1,12 +1,30 @@
 # Change Log - @fluentui/web-components
 
-This log was last generated on Thu, 19 Oct 2023 04:17:59 GMT and should not be manually modified.
+This log was last generated on Fri, 09 Feb 2024 04:08:36 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [3.0.0-beta.7](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.7)
+
+Fri, 09 Feb 2024 04:08:36 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.6..@fluentui/web-components_v3.0.0-beta.7)
+
+### Changes
+
+- feat: remove JS design token implementation in favor of platform css variables ([PR #30002](https://github.com/microsoft/fluentui/pull/30002) by chhol@microsoft.com)
+
+## [3.0.0-beta.6](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.6)
+
+Thu, 26 Oct 2023 04:16:51 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.5..@fluentui/web-components_v3.0.0-beta.6)
+
+### Changes
+
+- feat(dialog): add dialog web component ([PR #28569](https://github.com/microsoft/fluentui/pull/28569) by brian.christopher.brady@gmail.com)
+
 ## [3.0.0-beta.5](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.5)
 
-Thu, 19 Oct 2023 04:17:59 GMT 
+Thu, 19 Oct 2023 04:18:07 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.4..@fluentui/web-components_v3.0.0-beta.5)
 
 ### Changes

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

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

package/dist/dts/dialog/dialog.d.ts

@@ -0,0 +1,192 @@
+import { FASTElement } from '@microsoft/fast-element';
+import { Button as FluentButton } from '../button/button.js';
+import { DialogModalType } from './dialog.options.js';
+/**
+ * Dialog component that extends the FASTElement class.
+ *
+ * @public
+ * @extends FASTElement
+ */
+export declare class Dialog extends FASTElement {
+    /**
+     * @private
+     * 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?: FluentButton;
+    /**
+     * @public
+     * The ID of the element that describes the dialog
+     */
+    ariaDescribedby?: string;
+    /**
+     * @public
+     * The ID of the element that labels the dialog
+     */
+    ariaLabelledby?: string;
+    /**
+     * @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;
+    /**
+     * @private
+     * 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;
+    /**
+     * @public
+     * Method called when the 'modalType' attribute changes
+     */
+    modalTypeChanged(oldValue: DialogModalType, newValue: DialogModalType): void;
+    /**
+     * @public
+     * Method to set the component's state based on its attributes
+     */
+    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;
+    /**
+     * @public
+     * Method to show the dialog
+     */
+    show(): void;
+    /**
+     * @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;
+    /**
+     * @public
+     * Handles click events on the dialog
+     * @param event - The click event
+     * @returns boolean
+     */
+    handleClick(event: Event): boolean;
+    /**
+     * @public
+     * Handles keydown events on the dialog
+     * @param e - The keydown event
+     * @returns boolean | void
+     */
+    handleKeydown: (e: KeyboardEvent) => boolean | void;
+    /**
+     * @private
+     * Handles keydown events on the document
+     * @param e - The keydown event
+     */
+    private handleDocumentKeydown;
+    /**
+     * @private
+     * Handles tab keydown events
+     * @param e - The keydown event
+     */
+    private handleTabKeyDown;
+    /**
+     * @private
+     * Gets the bounds of the tab queue
+     * @returns (HTMLElement | SVGElement)[]
+     */
+    private getTabQueueBounds;
+    /**
+     * @private
+     * Focuses the first element in the tab queue
+     */
+    private focusFirstElement;
+    /**
+     * @private
+     * Determines if focus should be forced
+     * @param currentFocusElement - The currently focused element
+     * @returns boolean
+     */
+    private shouldForceFocus;
+    /**
+     * @private
+     * Determines if focus should be trapped
+     * @returns boolean
+     */
+    private shouldTrapFocus;
+    /**
+     * @private
+     * Handles focus events on the document
+     * @param e - The focus event
+     */
+    private handleDocumentFocus;
+    /**
+     * @private
+     * Updates the state of focus trapping
+     * @param shouldTrapFocusOverride - Optional override for whether focus should be trapped
+     */
+    private updateTrapFocus;
+    /**
+     * @private
+     * 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;
+    /**
+     * @private
+     * Determines if an element is a focusable FASTElement
+     * @param element - The element to check
+     * @returns boolean
+     */
+    private static isFocusableFastElement;
+    /**
+     * @private
+     * Determines if an element has a tabbable shadow
+     * @param element - The element to check
+     * @returns boolean
+     */
+    private static hasTabbableShadow;
+}

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

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

package/dist/dts/dialog/dialog.options.d.ts

@@ -0,0 +1,11 @@
+import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
+/**
+ * Dialog modal type
+ * @public
+ */
+export declare const DialogModalType: {
+    readonly modal: "modal";
+    readonly nonModal: "non-modal";
+    readonly alert: "alert";
+};
+export declare type DialogModalType = ValuesOf<typeof DialogModalType>;

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

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

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

@@ -0,0 +1,7 @@
+import { ElementViewTemplate } from '@microsoft/fast-element';
+import type { Dialog } from './dialog.js';
+/**
+ * Template for the Dialog component
+ * @public
+ */
+export declare const template: ElementViewTemplate<Dialog>;

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

@@ -0,0 +1,4 @@
+export * from './dialog.js';
+export { definition as DialogDefinition } from './dialog.definition.js';
+export { template as DialogTemplate } from './dialog.template.js';
+export { styles as DialogStyles } from './dialog.styles.js';

package/dist/dts/index.d.ts

@@ -7,6 +7,7 @@ export * from './button/index.js';
 export * from './checkbox/index.js';
 export * from './compound-button/index.js';
 export * from './counter-badge/index.js';
+export * from './dialog/index.js';
 export * from './divider/index.js';
 export * from './image/index.js';
 export * from './label/index.js';