inviton-powerduck 0.0.217 → 0.0.219

package/components/dropdown/smart-dropdown.tsx

@@ -0,0 +1,739 @@
+/* eslint-disable ts/no-this-alias */
+/* eslint-disable no-useless-call */
+
+import type { VNode } from 'vue';
+
+import type { DropdownButtonItemArgs } from '../dropdown-button/dropdown-button-item';
+import type { FormItemWrapperArgs, MarginType } from '../form/form-item-wrapper';
+import { Component, Prop, Watch } from 'vue-facing-decorator';
+import PowerduckState from '../../app/powerduck-state';
+import TsxComponent from '../../app/vuetsx';
+import FormItemWrapper from '../form/form-item-wrapper';
+import './css/smart-dropdown.scss';
+
+// --- Resources ---
+export class SmartDropdownResources {
+	static placeholderDefault = 'Vyberte...';
+	static doneButtonText = 'Hotovo';
+	static loadingTextShort = '...';
+	static loadingTextLong = 'Načítavam...';
+	static noResultsSearch = 'Nenašli sa žiadne výsledky.';
+	static noResultsDefault = 'Žiadne možnosti.';
+	static searchResultTitle = 'Výsledky vyhľadávania';
+	static selectedTitle = 'Vybrané';
+	static categoriesTitle = 'Kategórie';
+	static summarySuffix = ' vybrané';
+	static closeLabel = PowerduckState.getResourceValue('close');
+}
+
+// --- Interfaces ---
+export interface SmartDropdownCategoryItem {
+	id: number | string;
+	text: string;
+	[key: string]: any;
+}
+
+export interface SmartDropdownSearchResultItem {
+	id: number | string;
+	text: string;
+	subtitle?: string;
+	imageUrl?: string;
+	[key: string]: any;
+}
+
+export type SmartDropdownItem = SmartDropdownCategoryItem | SmartDropdownSearchResultItem;
+
+export interface SmartDropdownSection {
+	id: string;
+	title?: string;
+	items: SmartDropdownItem[];
+}
+
+interface SmartDropdownArgs extends FormItemWrapperArgs {
+	categories: SmartDropdownCategoryItem[];
+	customSections: SmartDropdownSection[];
+	searchData: (text: string) => Promise<SmartDropdownSearchResultItem[]>;
+	value: SmartDropdownItem[];
+	multiselect: boolean;
+	placeholder: string;
+	selectionDisplay: 'chips' | 'text';
+	buttonLayout: 'footer' | 'inline';
+	searchMode: 'dropdown' | 'input';
+	customTriggerScope?: 'mobile' | 'desktop' | 'all';
+	customSectionRender?: (item: SmartDropdownItem, selected: boolean) => VNode;
+	customTriggerRender?: () => VNode;
+	changed: (e: SmartDropdownItem[]) => void;
+}
+
+@Component
+export default class SmartDropdown extends TsxComponent<SmartDropdownArgs> implements SmartDropdownArgs {
+	@Prop() label!: string;
+	@Prop() labelButtons!: DropdownButtonItemArgs[];
+	@Prop() subtitle!: string;
+	@Prop() cssClass!: string;
+	@Prop() mandatory!: boolean;
+	@Prop() disabled!: boolean;
+	@Prop() wrap!: boolean;
+	@Prop() hint: string;
+	@Prop() appendIcon: string;
+	@Prop() prependIcon: string;
+	@Prop() maxWidth?: number;
+	@Prop() marginType?: MarginType;
+	@Prop() appendClicked: () => void;
+	@Prop() prependClicked: () => void;
+	@Prop() prependIconClicked: () => void;
+	@Prop() appendIconClicked: () => void;
+	@Prop() keyDown: (e: KeyboardEvent) => void;
+	@Prop() keyUp: (e: KeyboardEvent) => void;
+	@Prop() enterPressed: (e: KeyboardEvent) => void;
+	@Prop() showClearValueButton!: boolean;
+
+	// --- Props from SmartDropdown---
+	@Prop({ type: Array, required: true }) readonly categories!: SmartDropdownCategoryItem[];
+	@Prop({ type: Array, default: () => [] }) readonly customSections!: SmartDropdownSection[];
+	@Prop({ type: Function, required: true }) readonly searchData!: (text: string) => Promise<SmartDropdownSearchResultItem[]>;
+	@Prop({ type: Array, default: () => [] }) readonly value!: SmartDropdownItem[];
+	@Prop({ type: Boolean, default: false }) readonly multiselect!: boolean;
+	@Prop({ type: String, default: () => SmartDropdownResources.placeholderDefault }) readonly placeholder!: string;
+	@Prop({ type: String, default: 'text' }) readonly selectionDisplay!: 'chips' | 'text';
+	@Prop({ type: String, default: 'footer' }) readonly buttonLayout!: 'footer' | 'inline';
+	@Prop({ type: String, default: 'dropdown' }) readonly searchMode!: 'dropdown' | 'input';
+	@Prop({ type: String, default: 'all' }) readonly customTriggerScope!: 'mobile' | 'desktop' | 'all';
+	@Prop({ type: Function }) readonly customSectionRender?: (item: SmartDropdownItem, selected: boolean) => VNode;
+	@Prop({ type: Function }) readonly customTriggerRender?: () => VNode;
+	@Prop() readonly changed: (e: SmartDropdownItem[]) => void;
+
+	// --- State ---
+	isOpen = false;
+	searchQuery = '';
+	searchResults: SmartDropdownSearchResultItem[] = [];
+	isLoading = false;
+	debounceTimer: number | null = null;
+	focusedIndex = -1;
+	triggerInputValue = '';
+
+	// Accessibility ID
+	uid = `smart-dd-${Math.random().toString(36).slice(2, 9)}`;
+
+	// --- Watchers ---
+	@Watch('value', { deep: true, immediate: true })
+	onSelectionChange() {
+		if (!this.isOpen || this.searchQuery === '') {
+			this.triggerInputValue = this.displayText;
+		}
+	}
+
+	// --- Computed ---
+	get listboxId(): string {
+		return `${this.uid}-listbox`;
+	}
+
+	get activeDescendantId(): string | undefined {
+		return this.focusedIndex >= 0 ? `${this.uid}-option-${this.focusedIndex}` : undefined;
+	}
+
+	get flattenedDisplayItems(): SmartDropdownItem[] {
+		// Helper to get flat list for keyboard navigation
+		if (this.isSearchActive) {
+			return this.searchResults;
+		}
+
+		const items: SmartDropdownItem[] = [];
+		if (this.pinnedSelectedItems.length > 0) {
+			items.push(...this.pinnedSelectedItems);
+		}
+
+		this.customSections.forEach(s => items.push(...s.items));
+		if (this.standardDisplayItems.length > 0) {
+			items.push(...this.standardDisplayItems);
+		}
+
+		return items;
+	}
+
+	get standardDisplayItems(): SmartDropdownItem[] {
+		if (this.multiselect && this.selectionDisplay === 'text' && this.value.length > 0) {
+			const selectedIds = new Set(this.value.map(i => i.id));
+			return this.categories.filter(c => !selectedIds.has(c.id));
+		}
+
+		return this.categories;
+	}
+
+	get pinnedSelectedItems(): SmartDropdownItem[] {
+		if (this.multiselect && this.selectionDisplay === 'text' && !this.isSearchActive) {
+			return this.value;
+		}
+
+		return [];
+	}
+
+	get isSearchActive(): boolean {
+		return this.searchQuery.trim().length > 0;
+	}
+
+	get displayText(): string {
+		if (this.value.length === 0) {
+			return '';
+		}
+
+		if (!this.multiselect) {
+			return this.value[0].text;
+		}
+
+		if (this.value.length === 1) {
+			return this.value[0].text;
+		}
+
+		return `${this.value.length}${SmartDropdownResources.summarySuffix}`;
+	}
+
+	beforeDestroy() {
+		this.removeEventHandlers();
+	}
+
+	// --- Methods ---
+
+	toggleDropdown(force?: boolean) {
+		const nextState = typeof force === 'boolean' ? force : !this.isOpen;
+		if (nextState) {
+			this.isOpen = true;
+			this.focusedIndex = -1; // Reset focus logic
+
+			this.$nextTick(() => {
+				const isMobile = window.innerWidth <= 768;
+				const dropdownInput = this.$el.querySelector('.dropdown-search-input') as HTMLInputElement;
+				const triggerInput = this.$el.querySelector('.trigger-input') as HTMLInputElement;
+
+				// Focus Logic
+				const shouldUseExternalFocus = this.searchMode === 'input' && !isMobile && this.customTriggerScope !== 'desktop';
+
+				if (shouldUseExternalFocus) {
+					triggerInput?.select();
+				} else {
+					dropdownInput?.focus();
+				}
+
+				// Initial Scroll Logic
+				if (this.pinnedSelectedItems.length > 0) {
+					const listContainer = this.$el.querySelector('.list-container') as HTMLElement;
+					const categoryHeader = this.$el.querySelector('.section-categories') as HTMLElement;
+					if (listContainer && categoryHeader) {
+						listContainer.scrollTop = categoryHeader.offsetTop;
+					}
+				}
+			});
+
+			this.removeEventHandlers();
+
+			const self = this;
+			this.handleClickOutside = (e: Event) => {
+				if (!self.$el.contains(e.target as Node)) {
+					self.closeDropdown.call(self);
+				}
+			};
+
+			this.handleGlobalKeydown = (e: KeyboardEvent) => {
+				if (!this.isOpen) {
+					// Allow opening with Enter or Down Arrow/Space if focused on trigger
+					if ((e.key === 'Enter' || e.key === 'ArrowDown' || e.key === ' ') && (e.target as HTMLElement).classList.contains('filter-trigger')) {
+						self.toggleDropdown.call(self, true);
+						e.preventDefault();
+					}
+
+					return;
+				}
+
+				const totalItems = self.flattenedDisplayItems.length;
+				switch (e.key) {
+					case 'Escape':
+						self.closeDropdown.call(self);
+						e.preventDefault();
+						break;
+					case 'Enter':
+						e.preventDefault();
+						if (self.focusedIndex >= 0) {
+							self.handleItemClick.call(self, self.flattenedDisplayItems[self.focusedIndex]);
+						} else {
+							self.confirmAndClose();
+						}
+
+						break;
+					case 'ArrowDown':
+						e.preventDefault();
+						self.focusedIndex = (self.focusedIndex + 1) % totalItems;
+						self.scrollItemIntoView.call(self, self.focusedIndex);
+						break;
+					case 'ArrowUp':
+						e.preventDefault();
+						self.focusedIndex = (self.focusedIndex - 1 + totalItems) % totalItems;
+						self.scrollItemIntoView.call(self, self.focusedIndex);
+						break;
+					case 'Home':
+						e.preventDefault();
+						self.focusedIndex = 0;
+						self.scrollItemIntoView.call(self, self.focusedIndex);
+						break;
+					case 'End':
+						e.preventDefault();
+						self.focusedIndex = totalItems - 1;
+						self.scrollItemIntoView.call(self, self.focusedIndex);
+						break;
+					case 'Tab':
+						self.closeDropdown.call(self); // Tab out closes dropdown
+						break;
+				}
+			};
+
+			document.addEventListener('click', this.handleClickOutside);
+			document.addEventListener('keydown', this.handleGlobalKeydown);
+		} else {
+			this.closeDropdown();
+		}
+	}
+
+	removeEventHandlers() {
+		if (this.handleClickOutside) {
+			document.removeEventListener('click', this.handleClickOutside);
+		}
+
+		if (this.handleGlobalKeydown) {
+			document.removeEventListener('keydown', this.handleGlobalKeydown);
+		}
+	}
+
+	closeDropdown() {
+		this.isOpen = false;
+		this.focusedIndex = -1;
+		this.triggerInputValue = this.displayText;
+		this.searchQuery = '';
+	}
+
+	confirmAndClose() {
+		if (this.isLoading) {
+			return;
+		}
+
+		this.searchQuery = '';
+		this.searchResults = [];
+		this.closeDropdown();
+	}
+
+	handleClickOutside = (e: Event) => {
+		if (!this.$el.contains(e.target as Node)) {
+			this.closeDropdown();
+		}
+	};
+
+	handleGlobalKeydown = (e: KeyboardEvent) => {
+		if (!this.isOpen) {
+			// Allow opening with Enter or Down Arrow/Space if focused on trigger
+			if ((e.key === 'Enter' || e.key === 'ArrowDown' || e.key === ' ') && (e.target as HTMLElement).classList.contains('filter-trigger')) {
+				this.toggleDropdown(true);
+				e.preventDefault();
+			}
+
+			return;
+		}
+
+		const totalItems = this.flattenedDisplayItems.length;
+
+		switch (e.key) {
+			case 'Escape':
+				this.closeDropdown();
+				e.preventDefault();
+				break;
+			case 'Enter':
+				e.preventDefault();
+				if (this.focusedIndex >= 0) {
+					this.handleItemClick(this.flattenedDisplayItems[this.focusedIndex]);
+				} else {
+					this.confirmAndClose();
+				}
+
+				break;
+			case 'ArrowDown':
+				e.preventDefault();
+				this.focusedIndex = (this.focusedIndex + 1) % totalItems;
+				this.scrollItemIntoView(this.focusedIndex);
+				break;
+			case 'ArrowUp':
+				e.preventDefault();
+				this.focusedIndex = (this.focusedIndex - 1 + totalItems) % totalItems;
+				this.scrollItemIntoView(this.focusedIndex);
+				break;
+			case 'Home':
+				e.preventDefault();
+				this.focusedIndex = 0;
+				this.scrollItemIntoView(this.focusedIndex);
+				break;
+			case 'End':
+				e.preventDefault();
+				this.focusedIndex = totalItems - 1;
+				this.scrollItemIntoView(this.focusedIndex);
+				break;
+			case 'Tab':
+				this.closeDropdown(); // Tab out closes dropdown
+				break;
+		}
+	};
+
+	scrollItemIntoView(index: number) {
+		// Use nextTick to ensure DOM is updated if virtualized (not here, but good practice)
+		this.$nextTick(() => {
+			const itemId = `${this.uid}-option-${index}`;
+			const el = document.getElementById(itemId);
+			el?.scrollIntoView({ block: 'nearest' });
+		});
+	}
+
+	handleInput(e: Event) {
+		const val = (e.target as HTMLInputElement).value;
+		this.triggerInputValue = val;
+		this.searchQuery = val;
+
+		if (this.debounceTimer) {
+			clearTimeout(this.debounceTimer);
+		}
+
+		if (val.trim().length === 0) {
+			this.isLoading = false;
+			this.searchResults = [];
+			return;
+		}
+
+		this.isLoading = true;
+		this.debounceTimer = window.setTimeout(async () => {
+			try {
+				this.searchResults = await this.searchData(val);
+			} catch (err) {
+				this.searchResults = [];
+			} finally {
+				this.isLoading = false;
+			}
+		}, 800);
+	}
+
+	handleItemClick(item: SmartDropdownItem) {
+		const isSelected = this.isSelected(item);
+		let newSelection: SmartDropdownItem[] = [];
+
+		if (this.multiselect) {
+			if (isSelected) {
+				newSelection = this.value.filter(i => i.id !== item.id);
+			} else {
+				newSelection = [
+					...this.value,
+					item,
+				];
+			}
+		} else {
+			newSelection = [item];
+			this.closeDropdown();
+		}
+
+		this.changed(newSelection);
+		this.$nextTick(() => {
+			this.triggerInputValue = this.displayText;
+		});
+	}
+
+	removeSelection(e: Event, item: SmartDropdownItem) {
+		e.stopPropagation();
+		const newSelection = this.value.filter(i => i.id !== item.id);
+		this.changed(newSelection);
+	}
+
+	isSelected(item: SmartDropdownItem): boolean {
+		return this.value.some(i => i.id === item.id);
+	}
+
+	// --- Renders ---
+
+	renderStandardTrigger() {
+		if (this.multiselect && this.selectionDisplay === 'chips' && this.value.length > 0) {
+			return (
+				<div class="trigger-content">
+					{this.value.map(item => (
+						<span class="chip" onClick={e => e.stopPropagation()} key={item.id}>
+							{item.text}
+							<span
+								class="chip-remove"
+								onClick={e => this.removeSelection(e, item)}
+								role="button"
+								aria-label={`Remove ${item.text}`}
+								tabindex={0}
+							>
+								&times;
+							</span>
+						</span>
+					))}
+					{this.searchMode === 'input' && (
+						<input
+							class="trigger-input-inline"
+							value={this.triggerInputValue === this.displayText ? '' : this.triggerInputValue}
+							onInput={this.handleInput}
+							aria-label={this.placeholder}
+						/>
+					)}
+				</div>
+			);
+		}
+
+		if (this.searchMode === 'input') {
+			return (
+				<input
+					class="trigger-input"
+					type="text"
+					placeholder={this.placeholder}
+					value={this.triggerInputValue}
+					onInput={this.handleInput}
+					onClick={e => (e.target as HTMLInputElement).select()}
+					aria-autocomplete="list"
+					aria-controls={this.listboxId}
+					aria-activedescendant={this.isOpen ? this.activeDescendantId : undefined}
+					aria-expanded={this.isOpen}
+				/>
+			);
+		}
+
+		return (
+			<div class="trigger-content">
+				<span class={this.value.length === 0 ? 'placeholder-text' : ''}>
+					{this.displayText || this.placeholder}
+				</span>
+			</div>
+		);
+	}
+
+	renderTrigger() {
+		if (!this.customTriggerRender) {
+			return this.renderStandardTrigger();
+		}
+
+		const customEl = (
+			<div class="trigger-custom-wrapper">
+				{this.customTriggerRender()}
+			</div>
+		);
+
+		const standardEl = this.renderStandardTrigger();
+
+		switch (this.customTriggerScope) {
+			case 'all': return customEl;
+			case 'mobile': return [
+				<div class="view-mobile-only">{customEl}</div>,
+				<div class="view-desktop-only">{standardEl}</div>,
+			];
+			case 'desktop': return [
+				<div class="view-desktop-only">{customEl}</div>,
+				<div class="view-mobile-only">{standardEl}</div>,
+			];
+			default: return standardEl;
+		}
+	}
+
+	// Main List Renderer (Manages Groups)
+	renderList() {
+		if (this.isLoading) {
+			return <div class="loading-state" role="status">{SmartDropdownResources.loadingTextLong}</div>;
+		}
+
+		// --- Helper to track global index for keyboard nav ---
+		let globalIndex = 0;
+		const getIndex = () => globalIndex++;
+
+		// A. Search Results
+		if (this.isSearchActive) {
+			if (this.searchResults.length === 0) {
+				return <div class="empty-state" role="status">{SmartDropdownResources.noResultsSearch}</div>;
+			}
+
+			return (
+				<div class="list-group" role="group" aria-label={SmartDropdownResources.searchResultTitle}>
+					<div class="list-group-label" aria-hidden="true">{SmartDropdownResources.searchResultTitle}</div>
+					{this.searchResults.map(item => this.renderListItem(item, getIndex()))}
+				</div>
+			);
+		}
+
+		const hasPinned = this.pinnedSelectedItems.length > 0;
+		const hasCustom = this.customSections.length > 0;
+		const hasStandard = this.standardDisplayItems.length > 0;
+
+		if (!hasPinned && !hasCustom && !hasStandard) {
+			return <div class="empty-state" role="status">{SmartDropdownResources.noResultsDefault}</div>;
+		}
+
+		return (
+			<div class="list-wrapper">
+				{/* 1. Pinned Selected */}
+				{hasPinned && (
+					<div class="list-group section-pinned" role="group" aria-label={SmartDropdownResources.selectedTitle}>
+						<div class="list-group-label sticky-selected" aria-hidden="true">
+							{SmartDropdownResources.selectedTitle}
+							{' '}
+							(
+							{this.value.length}
+							)
+						</div>
+						{this.pinnedSelectedItems.map(item => this.renderListItem(item, getIndex()))}
+					</div>
+				)}
+
+				{/* 2. Custom Sections */}
+				{this.customSections.map(section => (
+					<div class="list-group section-custom" key={section.id} role="group" aria-label={section.title || 'Section'}>
+						{section.title && <div class="list-group-label" aria-hidden="true">{section.title}</div>}
+						{section.items.map(item => this.renderListItem(item, getIndex()))}
+					</div>
+				))}
+
+				{/* 3. Standard Categories */}
+				{hasStandard && (
+					<div class="list-group section-categories" role="group" aria-label={SmartDropdownResources.categoriesTitle}>
+						<div class="list-group-label" aria-hidden="true">{SmartDropdownResources.categoriesTitle}</div>
+						{this.standardDisplayItems.map(item => this.renderListItem(item, getIndex()))}
+					</div>
+				)}
+			</div>
+		);
+	}
+
+	renderListItem(item: SmartDropdownItem, index: number) {
+		const isSelected = this.isSelected(item);
+		const isFocused = this.focusedIndex === index;
+		const uniqueId = `${this.uid}-option-${index}`;
+
+		// Wrapper properties for accessibility
+		const wrapperProps = {
+			'id': uniqueId,
+			'class': {
+				'list-item-custom-container': !!this.customSectionRender,
+				'list-item': !this.customSectionRender,
+				'selected': isSelected,
+				'focused': isFocused, // Visual focus state
+				'no-checkbox': !this.multiselect,
+			},
+			'role': 'option',
+			'aria-selected': isSelected,
+			'onClick': () => this.handleItemClick(item),
+			'key': item.id,
+		};
+
+		// 1. Custom Renderer
+		if (this.customSectionRender) {
+			return (
+				<div {...wrapperProps}>
+					{this.customSectionRender(item, isSelected)}
+				</div>
+			);
+		}
+
+		// 2. Default Renderer
+		const searchResult = item as SmartDropdownSearchResultItem;
+		const hasSubtitle = !!searchResult.subtitle;
+		const hasImage = !!searchResult.imageUrl;
+		const showCheckbox = this.multiselect && !this.isSearchActive && !hasImage;
+
+		return (
+			<div {...wrapperProps}>
+				{hasImage
+					? (
+							<img src={searchResult.imageUrl} class="result-image" alt="" />
+						)
+					: (
+							showCheckbox && <div class={`checkbox-visual ${isSelected ? 'checked' : ''}`} aria-hidden="true"></div>
+						)}
+
+				<div class="item-content">
+					<span class="item-text">{item.text}</span>
+					{hasSubtitle && (
+						<span class="item-subtitle">{searchResult.subtitle}</span>
+					)}
+				</div>
+			</div>
+		);
+	}
+
+	render() {
+		const showCaret = this.searchMode !== 'input' && !this.customTriggerRender;
+
+		return (
+			<FormItemWrapper label={this.label} cssClass={this.cssClass} mandatory={this.mandatory} wrap={this.wrap} appendIcon={this.appendIcon} prependIcon={this.prependIcon} hint={this.hint} marginType={this.marginType} appendClicked={this.appendClicked} prependClicked={this.prependClicked} prependIconClicked={this.prependIconClicked} appendIconClicked={this.appendIconClicked} maxWidth={this.maxWidth} validationState={this.validationState} labelButtons={this.labelButtons} subtitle={this.subtitle} showClearValueButton={this.showClearValueButton}>
+				<div
+					class={`gopass-filter-wrapper mode-${this.searchMode}`}
+					// Only the outer wrapper acts as combobox if not in direct input mode
+					role={this.searchMode !== 'input' ? 'combobox' : undefined}
+					aria-expanded={this.isOpen}
+					aria-haspopup="listbox"
+					aria-controls={this.listboxId}
+					aria-label={this.placeholder}
+				>
+
+					{/* TRIGGER */}
+					<div
+						class={{ 'filter-trigger': true, 'is-open': this.isOpen }}
+						onClick={() => this.toggleDropdown(true)}
+						tabindex={this.searchMode === 'input' && !this.customTriggerRender ? undefined : 0}
+					>
+						{this.renderTrigger()}
+						{showCaret && <span class="caret" aria-hidden="true"></span>}
+					</div>
+
+					{/* DROPDOWN */}
+					{this.isOpen && (
+						<div class="filter-dropdown" onClick={e => e.stopPropagation()}>
+
+							{/* INTERNAL HEADER */}
+							<div class="search-header internal-search-header">
+								<input
+									type="text"
+									class="search-input dropdown-search-input"
+									placeholder={this.placeholder}
+									value={this.triggerInputValue}
+									onInput={this.handleInput}
+									// Accessibility for internal input
+									aria-autocomplete="list"
+									aria-controls={this.listboxId}
+									aria-activedescendant={this.activeDescendantId}
+								/>
+								{this.buttonLayout === 'inline' && (
+									<button
+										class="btn-confirm"
+										disabled={this.isLoading}
+										onClick={() => this.confirmAndClose()}
+									>
+										{this.isLoading ? SmartDropdownResources.loadingTextShort : SmartDropdownResources.doneButtonText}
+									</button>
+								)}
+							</div>
+
+							{/* LIST */}
+							<div
+								class="list-container"
+								id={this.listboxId}
+								role="listbox"
+								aria-multiselectable={this.multiselect}
+							>
+								{this.renderList()}
+							</div>
+
+							{/* FOOTER */}
+							{this.buttonLayout === 'footer' && (
+								<div class="dropdown-footer">
+									<button
+										class="btn-confirm"
+										onClick={() => this.confirmAndClose()}
+									>
+										{SmartDropdownResources.doneButtonText}
+									</button>
+								</div>
+							)}
+						</div>
+					)}
+				</div>
+			</FormItemWrapper>
+		);
+	}
+}