Skip to content

Commit f706fe1

Browse files
radium-vradium-v
authored
feat(web-components): add Dropdown, Listbox, and Option components (#32116)
1 parent 3189452 commit f706fe1

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+4579
-22
lines changed

‎apps/vr-tests-web-components/tsconfig.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
{
22
"extends": "../../tsconfig.base.wc.json",
33
"compilerOptions": {
4-
"target": "ES2019",
54
"module": "NodeNext",
65
"noEmit": true,
76
"experimentalDecorators": true,

‎change/@fluentui-web-components-7b17a2b2-f134-4934-8331-709bea980b6c.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "prerelease",
3+
"comment": "add Dropdown, Listbox, and Option components",
4+
"packageName": "@fluentui/web-components",
5+
"email": "863023+radium-v@users.noreply.github.com",
6+
"dependentChangeType": "patch"
7+
}

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

Lines changed: 272 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -589,6 +589,85 @@ export class BaseDivider extends FASTElement {
589589
roleChanged(previous: string | null, next: string | null): void;
590590
}
591591

592+
// @public
593+
export class BaseDropdown extends FASTElement {
594+
constructor();
595+
get activeDescendant(): string | undefined;
596+
// @internal
597+
activeIndex: number;
598+
// @internal
599+
activeIndexChanged(prev: number | undefined, next: number | undefined): void;
600+
ariaLabelledBy: string;
601+
changeHandler(e: Event): boolean | void;
602+
clickHandler(e: PointerEvent): boolean | void;
603+
// @internal
604+
control: HTMLInputElement;
605+
// @internal
606+
controlChanged(prev: HTMLInputElement | undefined, next: HTMLInputElement | undefined): void;
607+
// @internal
608+
controlSlot: HTMLSlotElement;
609+
disabled?: boolean;
610+
disabledChanged(prev: boolean | undefined, next: boolean | undefined): void;
611+
get displayValue(): string;
612+
// @internal
613+
elementInternals: ElementInternals;
614+
get enabledOptions(): DropdownOption[];
615+
// @internal
616+
filterOptions(value: string, collection?: DropdownOption[]): DropdownOption[];
617+
// @internal
618+
focus(options?: FocusOptions): void;
619+
// @internal
620+
focusoutHandler(e: FocusEvent): boolean | void;
621+
static formAssociated: boolean;
622+
// @internal
623+
formResetCallback(): void;
624+
// @override
625+
id: string;
626+
// @internal
627+
indicator: HTMLDivElement;
628+
// @internal
629+
indicatorSlot?: HTMLSlotElement;
630+
initialValue?: string;
631+
inputHandler(e: InputEvent): boolean | void;
632+
protected insertControl(): void;
633+
keydownHandler(e: KeyboardEvent): boolean | void;
634+
// @internal
635+
listbox: Listbox;
636+
// @internal
637+
listboxChanged(prev: Listbox | undefined, next: Listbox | undefined): void;
638+
// @internal
639+
listboxSlot: HTMLSlotElement;
640+
// @internal
641+
mousedownHandler(e: MouseEvent): boolean | void;
642+
multiple?: boolean;
643+
// @internal
644+
protected multipleChanged(prev: boolean | undefined, next: boolean | undefined): void;
645+
name: string;
646+
nameChanged(prev: string, next: string): void;
647+
open: boolean;
648+
// @internal
649+
openChanged(prev: boolean | undefined, next: boolean | undefined): void;
650+
get options(): DropdownOption[];
651+
placeholder: string;
652+
required: boolean;
653+
// @internal
654+
get selectedIndex(): number;
655+
get selectedOptions(): DropdownOption[];
656+
selectOption(index?: number): void;
657+
// @internal
658+
setValidity(flags?: Partial<ValidityState>, message?: string, anchor?: HTMLElement): void;
659+
type: DropdownType;
660+
// @internal
661+
typeChanged(prev: DropdownType | undefined, next: DropdownType | undefined): void;
662+
// @internal
663+
protected updateFreeformOption(value?: string): void;
664+
// @internal
665+
get validationMessage(): string;
666+
get value(): string | null;
667+
set value(next: string | null);
668+
valueAttribute: string;
669+
}
670+
592671
// @public
593672
export class BaseField extends FASTElement {
594673
constructor();
@@ -2403,6 +2482,145 @@ export const DrawerType: {
24032482
// @public
24042483
export type DrawerType = ValuesOf<typeof DrawerType>;
24052484

2485+
// @public
2486+
export class Dropdown extends BaseDropdown {
2487+
constructor();
2488+
appearance: DropdownAppearance;
2489+
// @internal
2490+
appearanceChanged(prev: DropdownAppearance | undefined, next: DropdownAppearance | undefined): void;
2491+
// (undocumented)
2492+
connectedCallback(): void;
2493+
// (undocumented)
2494+
disconnectedCallback(): void;
2495+
// @internal
2496+
openChanged(prev: boolean | undefined, next: boolean | undefined): void;
2497+
size?: DropdownSize;
2498+
// @internal
2499+
sizeChanged(prev: DropdownSize | undefined, next: DropdownSize | undefined): void;
2500+
}
2501+
2502+
// @public
2503+
export const DropdownAppearance: {
2504+
filledDarker: string;
2505+
filledLighter: string;
2506+
outline: string;
2507+
transparent: string;
2508+
};
2509+
2510+
// @public (undocumented)
2511+
export type DropdownAppearance = ValuesOf<typeof DropdownAppearance>;
2512+
2513+
// @public
2514+
export const dropdownButtonTemplate: ViewTemplate<BaseDropdown, any>;
2515+
2516+
// @public
2517+
export const DropdownDefinition: FASTElementDefinition<typeof Dropdown>;
2518+
2519+
// @public
2520+
export const dropdownInputTemplate: ViewTemplate<BaseDropdown, any>;
2521+
2522+
// Warning: (ae-forgotten-export) The symbol "Start" needs to be exported by the entry point index.d.ts
2523+
//
2524+
// @public
2525+
export class DropdownOption extends FASTElement implements Start {
2526+
constructor();
2527+
active: boolean;
2528+
// @internal
2529+
protected activeChanged(prev: boolean, next: boolean): void;
2530+
// (undocumented)
2531+
connectedCallback(): void;
2532+
// @internal
2533+
currentSelected?: boolean;
2534+
// @internal
2535+
currentSelectedChanged(prev: boolean | undefined, next: boolean | undefined): void;
2536+
defaultSelected?: boolean;
2537+
// @internal
2538+
protected defaultSelectedChanged(prev: boolean | undefined, next: boolean | undefined): void;
2539+
// @internal
2540+
descriptionSlot: Node[];
2541+
// @internal
2542+
descriptionSlotChanged(prev: Node[] | undefined, next: Node[] | undefined): void;
2543+
disabled?: boolean;
2544+
disabledAttribute?: boolean;
2545+
// @internal
2546+
protected disabledAttributeChanged(prev: boolean | undefined, next: boolean | undefined): void;
2547+
// @internal
2548+
protected disabledChanged(prev: boolean | undefined, next: boolean | undefined): void;
2549+
// @internal
2550+
elementInternals: ElementInternals;
2551+
get form(): HTMLFormElement | null;
2552+
static formAssociated: boolean;
2553+
formAttribute?: string;
2554+
freeform?: boolean;
2555+
// @internal
2556+
freeformOutputs?: HTMLOutputElement[];
2557+
// @override
2558+
id: string;
2559+
initialValue: string;
2560+
// @internal
2561+
protected initialValueChanged(prev: string, next: string): void;
2562+
get labels(): ReadonlyArray<HTMLLabelElement>;
2563+
multiple: boolean;
2564+
multipleChanged(prev: boolean, next: boolean): void;
2565+
name: string;
2566+
get selected(): boolean;
2567+
set selected(next: boolean);
2568+
// @internal
2569+
setFormValue(value: File | string | FormData | null, state?: File | string | FormData | null): void;
2570+
// @internal
2571+
start: HTMLSlotElement;
2572+
get text(): string;
2573+
textAttribute?: string;
2574+
toggleSelected(force?: boolean): void;
2575+
get value(): string;
2576+
set value(value: string);
2577+
}
2578+
2579+
// @public
2580+
export const DropdownOptionDefinition: FASTElementDefinition<typeof DropdownOption>;
2581+
2582+
// @public
2583+
export type DropdownOptionOptions = StartOptions<DropdownOption> & {
2584+
checkedIndicator?: StaticallyComposableHTML<DropdownOption>;
2585+
};
2586+
2587+
// @public
2588+
export type DropdownOptions = {
2589+
indicator?: StaticallyComposableHTML<BaseDropdown>;
2590+
};
2591+
2592+
// @public
2593+
export const DropdownOptionStyles: ElementStyles;
2594+
2595+
// @public
2596+
export const DropdownOptionTemplate: ElementViewTemplate<DropdownOption>;
2597+
2598+
// @public
2599+
export const DropdownSize: {
2600+
readonly small: "small";
2601+
readonly medium: "medium";
2602+
readonly large: "large";
2603+
};
2604+
2605+
// @public (undocumented)
2606+
export type DropdownSize = ValuesOf<typeof DropdownSize>;
2607+
2608+
// @public
2609+
export const DropdownStyles: ElementStyles;
2610+
2611+
// @public
2612+
export const DropdownTemplate: ElementViewTemplate<BaseDropdown>;
2613+
2614+
// @public
2615+
export const DropdownType: {
2616+
readonly combobox: "combobox";
2617+
readonly dropdown: "dropdown";
2618+
readonly select: "select";
2619+
};
2620+
2621+
// @public (undocumented)
2622+
export type DropdownType = ValuesOf<typeof DropdownType>;
2623+
24062624
// @public
24072625
export const durationFast = "var(--durationFast)";
24082626

@@ -2574,6 +2792,15 @@ export const ImageStyles: ElementStyles;
25742792
// @public
25752793
export const ImageTemplate: ElementViewTemplate<Image_2>;
25762794

2795+
// @public
2796+
export function isDropdown(element?: Node | null, tagName?: string): element is BaseDropdown;
2797+
2798+
// @public
2799+
export function isDropdownOption(value: Node | null, tagName?: string): value is DropdownOption;
2800+
2801+
// @public
2802+
export function isListbox(element?: Node | null, tagName?: string): element is Listbox;
2803+
25772804
// @public
25782805
export class Label extends FASTElement {
25792806
disabled: boolean;
@@ -2692,6 +2919,47 @@ export type LinkTarget = ValuesOf<typeof AnchorTarget>;
26922919
// @public
26932920
export const LinkTemplate: ElementViewTemplate<Link>;
26942921

2922+
// @public
2923+
export class Listbox extends FASTElement {
2924+
constructor();
2925+
// @internal
2926+
beforetoggleHandler(e: ToggleEvent): boolean | undefined;
2927+
clickHandler(e: PointerEvent): boolean | void;
2928+
// (undocumented)
2929+
connectedCallback(): void;
2930+
// @internal
2931+
dropdown?: BaseDropdown;
2932+
// @internal
2933+
elementInternals: ElementInternals;
2934+
// @internal
2935+
get enabledOptions(): DropdownOption[];
2936+
// @internal
2937+
handleChange(source: any, propertyName?: string): void;
2938+
// @override
2939+
id: string;
2940+
multiple?: boolean;
2941+
multipleChanged(prev: boolean | undefined, next: boolean | undefined): void;
2942+
options: DropdownOption[];
2943+
// @internal
2944+
optionsChanged(prev: DropdownOption[] | undefined, next: DropdownOption[] | undefined): void;
2945+
// @internal
2946+
selectedIndex: number;
2947+
get selectedOptions(): DropdownOption[];
2948+
selectOption(index?: number): void;
2949+
}
2950+
2951+
// @public
2952+
export const ListboxDefinition: FASTElementDefinition<typeof Listbox>;
2953+
2954+
// @public
2955+
export const ListboxStyles: ElementStyles;
2956+
2957+
// @public
2958+
export const ListboxTemplate: ElementViewTemplate<Listbox>;
2959+
2960+
// @public
2961+
export function listboxTemplate<T extends Listbox>(): ElementViewTemplate<T>;
2962+
26952963
// @public
26962964
export abstract class MatchMediaBehavior implements HostBehavior {
26972965
constructor(query: MediaQueryList);
@@ -3490,8 +3758,10 @@ export const SpinnerStyles: ElementStyles;
34903758
// @public (undocumented)
34913759
export const SpinnerTemplate: ViewTemplate<Spinner, any>;
34923760

3761+
// Warning: (ae-forgotten-export) The symbol "End" needs to be exported by the entry point index.d.ts
3762+
//
34933763
// @public
3494-
export class StartEnd {
3764+
export class StartEnd implements Start, End {
34953765
// (undocumented)
34963766
end: HTMLSlotElement;
34973767
// (undocumented)
@@ -3507,7 +3777,7 @@ export type StartOptions<TSource = any, TParent = any> = {
35073777
};
35083778

35093779
// @public
3510-
export function startSlotTemplate<TSource extends StartEnd = StartEnd, TParent = any>(options: StartOptions<TSource, TParent>): CaptureType<TSource, TParent>;
3780+
export function startSlotTemplate<TSource extends Pick<StartEnd, 'start'> = StartEnd, TParent = any>(options: StartOptions<TSource, TParent>): CaptureType<TSource, TParent>;
35113781

35123782
// @public
35133783
export const strokeWidthThick = "var(--strokeWidthThick)";

0 commit comments

Comments
 (0)