e.stopPropagation()}
+ onKeyDown={handleRootKeyDown}>
+
+ Sort
+ }
+ onClick={handleClose}
+ className={styles.closeButton}
+ title={locConstants.common.close}
+ aria-label={locConstants.common.close}
+ />
+
+
+
+
+
+
+
+ }
+ onClick={handleSortDescending}
+ title={locConstants.queryResult.sortDescending}
+ aria-label={locConstants.queryResult.sortDescending}>
+ {locConstants.queryResult.sortDescending}
+
+
+ }
+ title={locConstants.queryResult.clearSort}
+ onClick={handleClearSort}
+ aria-label={locConstants.queryResult.clearSort}
+ disabled={currentSort === SortProperties.NONE}>
+ {locConstants.queryResult.removeSort}
+
+
+
+
+
+
+
Filter
+
+ {
+ searchInputRef.current = el;
+ }}
+ className={styles.searchInput}
+ appearance="outline"
+ size="small"
+ placeholder={locConstants.queryResult.search}
+ value={search}
+ onChange={handleSearchChange}
+ role="searchbox"
+ contentBefore={}
+ />
+
+
+
+ {filteredItems.length === 0 ? (
+
+ {locConstants.queryResult.noResultsToDisplay}
+
+ ) : (
+ <>
+
+
+
+ {locConstants.queryResult.selectedCount(selectedValues.size)}
+
+
+
{
+ if (focusedIndex === -1 && filteredItems.length > 0) {
+ setFocusedIndex(0);
+ }
+ }}>
+
+ {virtualizer.getVirtualItems().map((virtualItem) => {
+ const item = filteredItems[virtualItem.index];
+ const isChecked = selectedValues.has(item.value);
+ const isFocused = virtualItem.index === focusedIndex;
+ return (
+
+
updateSelection(item.value, !isChecked)}
+ onMouseEnter={() => setFocusedIndex(virtualItem.index)}>
+
+
+
+ );
+ })}
+
+
+
+ )}
+
+
+
+
+