chore: add base class for menu-list and radio-group (microsoft#35965)

Author: marchbox

change/@fluentui-web-components-126d0d3c-b685-4c33-aa55-f597e49a74a1.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "add base classes for menu-list and radio-group",
+  "packageName": "@fluentui/web-components",
+  "email": "machi@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/web-components/docs/web-components.api.md

@@ -731,6 +731,34 @@ export class BaseField extends FASTElement {
     slottedInputsChanged(prev: SlottableInput[] | undefined, next: SlottableInput[] | undefined): void;
 }
 
+// @public
+export class BaseMenuList extends FASTElement {
+    constructor();
+    // @internal (undocumented)
+    connectedCallback(): void;
+    // @internal (undocumented)
+    disconnectedCallback(): void;
+    // @internal
+    elementInternals: ElementInternals;
+    focus(): void;
+    handleChange(source: any, propertyName: string): void;
+    // @internal
+    handleFocusOut: (e: FocusEvent) => void;
+    // @internal (undocumented)
+    handleMenuKeyDown(e: KeyboardEvent): void | boolean;
+    protected isMenuItemElement: (el: Element) => el is HTMLElement;
+    // @internal (undocumented)
+    readonly isNestedMenu: () => boolean;
+    // @internal (undocumented)
+    items: HTMLElement[];
+    // (undocumented)
+    protected itemsChanged(oldValue: HTMLElement[], newValue: HTMLElement[]): void;
+    // (undocumented)
+    protected menuItems: Element[] | undefined;
+    // (undocumented)
+    protected setItems(): void;
+}
+
 // @public
 export class BaseProgressBar extends FASTElement {
     constructor();
@@ -757,6 +785,67 @@ export class BaseProgressBar extends FASTElement {
     protected valueChanged(prev: number | undefined, next: number | undefined): void;
 }
 
+// @public
+export class BaseRadioGroup extends FASTElement {
+    constructor();
+    changeHandler(e: Event): boolean | void;
+    // @internal
+    protected checkedIndex: number;
+    // @internal
+    protected checkedIndexChanged(prev: number | undefined, next: number): void;
+    // @internal
+    checkRadio(index?: number, shouldEmit?: boolean): void;
+    checkValidity(): boolean;
+    // @internal
+    clickHandler(e: MouseEvent): boolean | void;
+    disabled: boolean;
+    // @internal
+    protected disabledChanged(prev?: boolean, next?: boolean): void;
+    // (undocumented)
+    disabledRadioHandler(e: CustomEvent): void;
+    // @internal
+    elementInternals: ElementInternals;
+    // @internal
+    get enabledRadios(): Radio[];
+    // @internal
+    focus(): void;
+    // @internal
+    focusinHandler(e: FocusEvent): boolean | void;
+    // @internal
+    focusoutHandler(e: FocusEvent): boolean | void;
+    static formAssociated: boolean;
+    // (undocumented)
+    formResetCallback(): void;
+    initialValue?: string;
+    initialValueChanged(prev: string | undefined, next: string | undefined): void;
+    // @internal
+    keydownHandler(e: KeyboardEvent): boolean | void;
+    name: string;
+    // @internal
+    protected nameChanged(prev: string | undefined, next: string | undefined): void;
+    orientation?: RadioGroupOrientation;
+    // @internal
+    orientationChanged(prev: RadioGroupOrientation | undefined, next: RadioGroupOrientation | undefined): void;
+    radios: Radio[];
+    radiosChanged(prev: Radio[] | undefined, next: Radio[] | undefined): void;
+    reportValidity(): boolean;
+    required: boolean;
+    // (undocumented)
+    requiredChanged(prev: boolean, next: boolean): void;
+    // @internal
+    setFormValue(value: File | string | FormData | null, state?: File | string | FormData | null): void;
+    // @internal
+    setValidity(flags?: Partial<ValidityState>, message?: string, anchor?: HTMLElement): void;
+    // @internal
+    slottedRadios: Radio[];
+    slottedRadiosChanged(prev: Radio[] | undefined, next: Radio[]): void;
+    // @internal
+    get validationMessage(): string;
+    get validity(): ValidityState;
+    get value(): string | null;
+    set value(next: string | null);
+}
+
 // @public
 export class BaseRatingDisplay extends FASTElement {
     constructor();
@@ -3282,31 +3371,7 @@ export const MenuItemStyles: ElementStyles;
 export const MenuItemTemplate: ElementViewTemplate<MenuItem>;
 
 // @public
-export class MenuList extends FASTElement {
-    constructor();
-    // @internal (undocumented)
-    connectedCallback(): void;
-    // @internal (undocumented)
-    disconnectedCallback(): void;
-    // @internal
-    elementInternals: ElementInternals;
-    focus(): void;
-    handleChange(source: any, propertyName: string): void;
-    // @internal
-    handleFocusOut: (e: FocusEvent) => void;
-    // @internal (undocumented)
-    handleMenuKeyDown(e: KeyboardEvent): void | boolean;
-    protected isMenuItemElement: (el: Element) => el is HTMLElement;
-    // @internal (undocumented)
-    readonly isNestedMenu: () => boolean;
-    // @internal (undocumented)
-    items: HTMLElement[];
-    // (undocumented)
-    protected itemsChanged(oldValue: HTMLElement[], newValue: HTMLElement[]): void;
-    // (undocumented)
-    protected menuItems: Element[] | undefined;
-    // (undocumented)
-    protected setItems(): void;
+export class MenuList extends BaseMenuList {
 }
 
 // @public (undocumented)
@@ -3452,64 +3517,7 @@ export type RadioControl = Pick<HTMLInputElement, 'checked' | 'disabled' | 'focu
 export const RadioDefinition: FASTElementDefinition<typeof Radio>;
 
 // @public
-export class RadioGroup extends FASTElement {
-    constructor();
-    changeHandler(e: Event): boolean | void;
-    // @internal
-    protected checkedIndex: number;
-    // @internal
-    protected checkedIndexChanged(prev: number | undefined, next: number): void;
-    // @internal
-    checkRadio(index?: number, shouldEmit?: boolean): void;
-    checkValidity(): boolean;
-    // @internal
-    clickHandler(e: MouseEvent): boolean | void;
-    disabled: boolean;
-    // @internal
-    protected disabledChanged(prev?: boolean, next?: boolean): void;
-    // (undocumented)
-    disabledRadioHandler(e: CustomEvent): void;
-    // @internal
-    elementInternals: ElementInternals;
-    // @internal
-    get enabledRadios(): Radio[];
-    // @internal
-    focus(): void;
-    // @internal
-    focusinHandler(e: FocusEvent): boolean | void;
-    // @internal
-    focusoutHandler(e: FocusEvent): boolean | void;
-    static formAssociated: boolean;
-    // (undocumented)
-    formResetCallback(): void;
-    initialValue?: string;
-    initialValueChanged(prev: string | undefined, next: string | undefined): void;
-    // @internal
-    keydownHandler(e: KeyboardEvent): boolean | void;
-    name: string;
-    // @internal
-    protected nameChanged(prev: string | undefined, next: string | undefined): void;
-    orientation?: RadioGroupOrientation;
-    // @internal
-    orientationChanged(prev: RadioGroupOrientation | undefined, next: RadioGroupOrientation | undefined): void;
-    radios: Radio[];
-    radiosChanged(prev: Radio[] | undefined, next: Radio[] | undefined): void;
-    reportValidity(): boolean;
-    required: boolean;
-    // (undocumented)
-    requiredChanged(prev: boolean, next: boolean): void;
-    // @internal
-    setFormValue(value: File | string | FormData | null, state?: File | string | FormData | null): void;
-    // @internal
-    setValidity(flags?: Partial<ValidityState>, message?: string, anchor?: HTMLElement): void;
-    // @internal
-    slottedRadios: Radio[];
-    slottedRadiosChanged(prev: Radio[] | undefined, next: Radio[]): void;
-    // @internal
-    get validationMessage(): string;
-    get validity(): ValidityState;
-    get value(): string | null;
-    set value(next: string | null);
+export class RadioGroup extends BaseRadioGroup {
 }
 
 // @public

packages/web-components/src/index.ts

@@ -178,7 +178,7 @@ export {
   roleForMenuItem,
 } from './menu-item/index.js';
 export type { MenuItemColumnCount, MenuItemOptions } from './menu-item/index.js';
-export { MenuList, MenuListDefinition, MenuListStyles, MenuListTemplate } from './menu-list/index.js';
+export { BaseMenuList, MenuList, MenuListDefinition, MenuListStyles, MenuListTemplate } from './menu-list/index.js';
 export { Menu, MenuDefinition, MenuStyles, MenuTemplate } from './menu/index.js';
 export {
   DropdownOption,
@@ -201,6 +201,7 @@ export {
   ProgressBarValidationState,
 } from './progress-bar/index.js';
 export {
+  BaseRadioGroup,
   RadioGroup,
   RadioGroupDefinition,
   RadioGroupOrientation,

packages/web-components/src/menu-list/index.ts

@@ -1,3 +1,4 @@
+export { BaseMenuList } from './menu-list.base.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';