@awsui/components-react/internal/components/options-list/index.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, __rest } from "tslib";
import { getBaseProps } from '../../base-component';
import styles from './styles.css.js';
import React, { useCallback, useEffect } from 'react';
import { fireNonCancelableEvent, fireKeyboardEvent } from '../../events';
import { useFallbackRef } from '../../hooks/fallback-ref';
import clsx from 'clsx';
var BOTTOM_TRIGGER_OFFSET = 80;
var OptionsList = function (_a, ref) {
    var _b;
    var open = _a.open, children = _a.children, _c = _a.nativeAttributes, nativeAttributes = _c === void 0 ? {} : _c, onKeyDown = _a.onKeyDown, onBlur = _a.onBlur, onLoadMore = _a.onLoadMore, _d = _a.position, position = _d === void 0 ? 'relative' : _d, _e = _a.role, role = _e === void 0 ? 'listbox' : _e, _f = _a.decreaseTopMargin, decreaseTopMargin = _f === void 0 ? false : _f, restProps = __rest(_a, ["open", "children", "nativeAttributes", "onKeyDown", "onBlur", "onLoadMore", "position", "role", "decreaseTopMargin"]);
    var baseProps = getBaseProps(restProps);
    var fallbackRef = useFallbackRef(ref);
    var handleScroll = useCallback(function () {
        var scrollContainer = fallbackRef === null || fallbackRef === void 0 ? void 0 : fallbackRef.current;
        if (scrollContainer) {
            var bottomEdgePosition = scrollContainer.scrollTop + scrollContainer.clientHeight;
            var remainingScrollHeight = scrollContainer.scrollHeight - bottomEdgePosition;
            if (remainingScrollHeight < BOTTOM_TRIGGER_OFFSET) {
                fireNonCancelableEvent(onLoadMore);
            }
        }
    }, [onLoadMore, fallbackRef]);
    var handleKeyDown = useCallback(function (event) {
        onKeyDown && fireKeyboardEvent(onKeyDown, event);
    }, [onKeyDown]);
    var handleBlur = useCallback(function () {
        fireNonCancelableEvent(onBlur);
    }, [onBlur]);
    useEffect(function () {
        if (!open) {
            return;
        }
        handleScroll();
    }, [handleScroll, children, open]);
    return (React.createElement("ul", __assign({ ref: fallbackRef, style: { position: position }, role: role, onScroll: handleScroll, onKeyDown: handleKeyDown, onBlur: handleBlur, tabIndex: -1 }, nativeAttributes, baseProps, { className: clsx(styles['options-list'], (_b = {},
            _b[styles['decrease-top-margin']] = decreaseTopMargin,
            _b)) }), open && children));
};
export default React.forwardRef(OptionsList);