@fluentui/web-components 3.0.0-beta.85 → 3.0.0-beta.87

package/dist/web-components.d.ts

@@ -1648,6 +1648,13 @@ export declare class BaseDivider extends FASTElement {
  * @public
  */
 export declare class BaseDropdown extends FASTElement {
+    /**
+     * Static property for the anchor positioning fallback observer. The observer is used to flip the listbox when it is
+     * out of view.
+     * @remarks This is only used when the browser does not support CSS anchor positioning.
+     * @internal
+     */
+    private static AnchorPositionFallbackObserver;
     /**
      * The ID of the current active descendant.
      *
@@ -2045,6 +2052,22 @@ export declare class BaseDropdown extends FASTElement {
      * @internal
      */
     protected updateFreeformOption(value?: string): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Handles the connected event for the listbox.
+     *
+     * @param e - the event object
+     * @internal
+     */
+    private listboxConnectedHandler;
+    /**
+     * When anchor positioning isn't supported, an intersection observer is used to flip the listbox when it hits the
+     * viewport bounds. One static observer is used for all dropdowns.
+     *
+     * @internal
+     */
+    private anchorPositionFallback;
 }
 
 /**
@@ -3261,6 +3284,105 @@ export declare class BaseTextInput extends FASTElement {
     setValidity(flags?: Partial<ValidityState>, message?: string, anchor?: HTMLElement): void;
 }
 
+declare class BaseTreeItem extends FASTElement {
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
+    constructor();
+    /**
+     * When true, the control will be appear expanded by user interaction.
+     * @public
+     * HTML Attribute: `expanded`
+     */
+    expanded: boolean;
+    /**
+     * Handles changes to the expanded attribute
+     * @param prev - the previous state
+     * @param next - the next state
+     *
+     * @public
+     */
+    expandedChanged(prev: boolean, next: boolean): void;
+    /**
+     * When true, the control will appear selected by user interaction.
+     * @public
+     * @remarks
+     * HTML Attribute: selected
+     */
+    selected: boolean;
+    /**
+     * Handles changes to the selected attribute
+     * @param prev - the previous state
+     * @param next - the next state
+     *
+     * @internal
+     */
+    protected selectedChanged(prev: boolean, next: boolean): void;
+    /**
+     * When true, the control has no child tree items
+     * @public
+     * HTML Attribute: empty
+     */
+    empty: boolean;
+    private styles;
+    /**
+     * The indent of the tree item element.
+     * This is not needed once css attr() is supported (--indent: attr(data-indent type(<number>)));
+     * @public
+     */
+    dataIndent: number | undefined;
+    private dataIndentChanged;
+    childTreeItems: BaseTreeItem[] | undefined;
+    /**
+     * Handles changes to the child tree items
+     *
+     * @public
+     */
+    childTreeItemsChanged(): void;
+    /**
+     * Updates the childrens indent
+     *
+     * @public
+     */
+    updateChildTreeItems(): void;
+    /**
+     * Sets the indent for each item
+     */
+    private setIndent;
+    /**
+     * Handle focus events
+     *
+     * @public
+     */
+    focusHandler(e: FocusEvent): void;
+    /**
+     * Handle blur events
+     *
+     * @public
+     */
+    blurHandler(e: FocusEvent): void;
+    /**
+     * Toggle the expansion state of the tree item
+     *
+     * @public
+     */
+    toggleExpansion(): void;
+    /**
+     * Toggle the single selection state of the tree item
+     *
+     * @public
+     */
+    toggleSelection(): void;
+    /**
+     * Whether the tree is nested
+     * @internal
+     */
+    get isNestedItem(): boolean;
+}
+
 /**
  * CSS custom property value for the {@link @fluentui/tokens#borderRadiusCircular | `borderRadiusCircular`} design token.
  * @public
@@ -6511,13 +6633,6 @@ export declare type DrawerType = ValuesOf<typeof DrawerType>;
  * @public
  */
 export declare class Dropdown extends BaseDropdown {
-    /**
-     * Static property for the anchor positioning fallback observer. The observer is used to flip the listbox when it is
-     * out of view.
-     * @remarks This is only used when the browser does not support CSS anchor positioning.
-     * @internal
-     */
-    private static AnchorPositionFallbackObserver;
     /**
      * The appearance of the dropdown.
      *
@@ -6549,31 +6664,6 @@ export declare class Dropdown extends BaseDropdown {
      * @internal
      */
     sizeChanged(prev: DropdownSize | undefined, next: DropdownSize | undefined): void;
-    connectedCallback(): void;
-    constructor();
-    disconnectedCallback(): void;
-    /**
-     * Handles the connected event for the listbox.
-     *
-     * @param e - the event object
-     * @internal
-     */
-    private listboxConnectedHandler;
-    /**
-     * Adds or removes the window event listener based on the open state.
-     *
-     * @param prev - the previous open state
-     * @param next - the current open state
-     * @internal
-     */
-    openChanged(prev: boolean | undefined, next: boolean | undefined): void;
-    /**
-     * When anchor positioning isn't supported, an intersection observer is used to flip the listbox when it hits the
-     * viewport bounds. One static observer is used for all dropdowns.
-     *
-     * @internal
-     */
-    private anchorPositionFallback;
 }
 
 /**
@@ -7379,7 +7469,7 @@ export declare function isListbox(element?: Node | null, tagName?: string): elem
  * @returns true if the element is a dropdown.
  * @public
  */
-export declare function isTreeItem(element?: Node | null, tagName?: string): element is TreeItem;
+export declare function isTreeItem(element?: Node | null, tagName?: string): element is BaseTreeItem;
 
 /**
  * The base class used for constructing a fluent-label custom element
@@ -11159,49 +11249,7 @@ export declare const TooltipStyles: ElementStyles;
  */
 export declare const TooltipTemplate: ViewTemplate<Tooltip, any>;
 
-export declare class TreeItem extends FASTElement {
-    /**
-     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
-     *
-     * @internal
-     */
-    elementInternals: ElementInternals;
-    constructor();
-    /**
-     * When true, the control will be appear expanded by user interaction.
-     * @public
-     * HTML Attribute: `expanded`
-     */
-    expanded: boolean;
-    /**
-     * Handles changes to the expanded attribute
-     * @param prev - the previous state
-     * @param next - the next state
-     *
-     * @public
-     */
-    expandedChanged(prev: boolean, next: boolean): void;
-    /**
-     * When true, the control will appear selected by user interaction.
-     * @public
-     * @remarks
-     * HTML Attribute: selected
-     */
-    selected: boolean;
-    /**
-     * Handles changes to the selected attribute
-     * @param prev - the previous state
-     * @param next - the next state
-     *
-     * @internal
-     */
-    protected selectedChanged(prev: boolean, next: boolean): void;
-    /**
-     * When true, the control has no child tree items
-     * @public
-     * HTML Attribute: empty
-     */
-    empty: boolean;
+export declare class TreeItem extends BaseTreeItem {
     /**
      * The size of the tree item element
      * @public
@@ -11224,59 +11272,18 @@ export declare class TreeItem extends FASTElement {
      * @internal
      */
     private appearanceChanged;
-    private styles;
-    /**
-     * The indent of the tree item element.
-     * This is not needed once css attr() is supported (--indent: attr(data-indent type(<number>)));
-     * @public
-     */
-    dataIndent: number | undefined;
-    private dataIndentChanged;
-    childTreeItems: TreeItem[] | undefined;
     /**
-     * Handles changes to the child tree items
-     *
+     * child tree items supered change event
      * @internal
      */
-    protected childTreeItemsChanged(): void;
+    childTreeItemsChanged(): void;
     /**
      * 1. Update the child items' size based on the tree's size
      * 2. Update the child items' appearance based on the tree's appearance
-     */
-    private updateChildTreeItems;
-    /**
-     * Sets the indent for each item
-     */
-    private setIndent;
-    /**
-     * Handle focus events
-     *
-     * @public
-     */
-    focusHandler(e: FocusEvent): void;
-    /**
-     * Handle blur events
-     *
-     * @public
-     */
-    blurHandler(e: FocusEvent): void;
-    /**
-     * Toggle the expansion state of the tree item
-     *
-     * @public
-     */
-    toggleExpansion(): void;
-    /**
-     * Toggle the single selection state of the tree item
      *
      * @public
      */
-    toggleSelection(): void;
-    /**
-     * Whether the tree is nested
-     * @internal
-     */
-    get isNestedItem(): boolean;
+    updateSizeAndAppearance(): void;
 }
 
 export declare const TreeItemAppearance: {