import React, { useContext } from "react"; import classnames from "classnames"; import { buildAriaProps, buildCss, buildDataProps, } from "../../utilities/props"; import { globalProps } from "../../utilities/globalProps"; import DropdownContext from "../context"; import List from "../../pb_list/_list"; import ListItem from "../../pb_list/_list_item"; import TextInput from "../../pb_text_input/_text_input"; import Body from "../../pb_body/_body"; type DropdownContainerProps = { aria?: { [key: string]: string }; className?: string; children?: React.ReactChild[] | React.ReactChild; data?: { [key: string]: string }; id?: string; searchbar?: boolean; }; const DropdownContainer = (props: DropdownContainerProps) => { const { aria = {}, className, children, data = {}, id, searchbar = false, } = props; const { isDropDownClosed, handleChange, filterItem, filteredOptions, inputRef, setFocusedOptionIndex, } = useContext(DropdownContext); const ariaProps = buildAriaProps(aria); const dataProps = buildDataProps(data); const classes = classnames( buildCss("pb_dropdown_container"), `${isDropDownClosed ? "close" : "open"}`, globalProps(props), className ); return (

setFocusedOptionIndex(-1)} > {searchbar && ( )} { filteredOptions?.length === 0 ? ( ): ( children ) }

); }; export default DropdownContainer;