@awsui/components-react/autosuggest/virtual-list.js

AWS UI is a collection of [React](https://reactjs.org/) components that help create intuitive, responsive, and accessible user experiences for web applications. It is developed by Amazon Web Services (AWS). This work is available under the terms of the [A

import { __assign } from "tslib";
import OptionsList from '../internal/components/options-list';
import AutosuggestOption from './autosuggest-option';
import React, { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
import { useVirtual } from 'react-virtual';
import { useContainerQuery } from '../internal/hooks/container-queries';
var VirtualList = function (_a, ref) {
    var handleLoadMore = _a.handleLoadMore, filteredItems = _a.filteredItems, value = _a.value, usingMouse = _a.usingMouse, highlightedOption = _a.highlightedOption, enteredTextLabel = _a.enteredTextLabel, dropdownStatus = _a.dropdownStatus, highlightedA11yProps = _a.highlightedA11yProps;
    var scrollRef = useRef(null);
    var _b = useContainerQuery(function (rect) { return rect.width; }, []), width = _b[0], strutRef = _b[1];
    useImperativeHandle(strutRef, function () { return scrollRef.current; });
    var rowVirtualizer = useVirtual({
        size: filteredItems.length,
        parentRef: scrollRef,
        estimateSize: useCallback(function () { return 31; }, [width]),
        overscan: 5
    });
    useImperativeHandle(ref, function () { return function (index) {
        if (!usingMouse.current) {
            rowVirtualizer.scrollToIndex(index);
        }
    }; }, [usingMouse, rowVirtualizer]);
    return (React.createElement(OptionsList, { onLoadMore: handleLoadMore, ref: scrollRef, open: true },
        React.createElement("div", { "aria-hidden": "true", key: "total-size", style: {
                height: rowVirtualizer.totalSize + "px",
                width: '100%',
                position: 'relative'
            } }),
        rowVirtualizer.virtualItems.map(function (virtualRow) {
            var index = virtualRow.index, start = virtualRow.start, measureRef = virtualRow.measureRef;
            var item = filteredItems[index];
            return (React.createElement(AutosuggestOption, __assign({ highlightText: value, option: item, highlighted: item === highlightedOption, key: index, "data-mouse-target": index, enteredTextLabel: enteredTextLabel, virtualPosition: start + (index === 0 ? 1 : 0), ref: measureRef }, (item === highlightedOption ? highlightedA11yProps : {}))));
        }),
        dropdownStatus));
};
export default forwardRef(VirtualList);