@awsui/components-react/select/parts/plain-list.js

On July 19th, 2022, we launched [Cloudscape Design System](https://cloudscape.design). Cloudscape is an evolution of AWS-UI. It consists of user interface guidelines, front-end components, design resources, and development tools for building intuitive, en

// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';
import { useContainerQuery } from '@awsui/component-toolkit';
import { useMergeRefs, useUniqueId } from '@awsui/component-toolkit/internal';
import OptionsList from '../../internal/components/options-list';
import { renderOptions } from '../utils/render-options';
import scrollToIndex from '../utils/scroll-to-index';
import { fallbackItemHeight } from './common';
import styles from './styles.css.js';
const PlainList = ({ menuProps, getOptionProps, filteredOptions, filteringValue, highlightType, checkboxes, hasDropdownStatus, listBottom, useInteractiveGroups, screenReaderContent, firstOptionSticky, }, ref) => {
    const idPrefix = useUniqueId('select-list-');
    const stickyOptionRef = useRef(null);
    const [stickyOptionBlockSize, setStickyOptionBlockSize] = useState(firstOptionSticky ? fallbackItemHeight : 0);
    const [width, menuMeasureRef] = useContainerQuery(rect => {
        if (stickyOptionRef.current) {
            // Cannot use container query on the sticky option individually because it is not rendered until the dropdown is open.
            // Not expecting the sticky option to change size without the dropdown also changing size.
            // The effects of using the sticky option block size to set the menu scroll padding are covered by integration tests.
            // istanbul ignore next
            setStickyOptionBlockSize(stickyOptionRef.current.clientHeight);
        }
        return { inner: rect.contentBoxWidth, outer: rect.borderBoxWidth };
    });
    const menuRef = menuProps.ref;
    const mergedRef = useMergeRefs(menuMeasureRef, menuRef);
    useImperativeHandle(ref, () => (index) => {
        const isSticky = firstOptionSticky && index === 0;
        if (highlightType.moveFocus && menuRef.current && !isSticky) {
            scrollToIndex({ index, menuEl: menuRef.current });
        }
    }, [firstOptionSticky, highlightType.moveFocus, menuRef]);
    const withScrollbar = !!width && width.inner < width.outer;
    return (React.createElement(OptionsList, { ...menuProps, ref: mergedRef, stickyItemBlockSize: stickyOptionBlockSize },
        renderOptions({
            options: filteredOptions,
            getOptionProps,
            filteringValue,
            idPrefix,
            highlightType,
            checkboxes,
            hasDropdownStatus,
            useInteractiveGroups,
            screenReaderContent,
            firstOptionSticky,
            stickyOptionRef,
            withScrollbar,
        }),
        listBottom ? (React.createElement("div", { role: "option", className: styles['list-bottom'] }, listBottom)) : null));
};
export default forwardRef(PlainList);
//# sourceMappingURL=plain-list.js.map