import React, { useContext } from "react"; import classnames from "classnames"; import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } 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 }; children?: React.ReactChild[] | React.ReactChild; className?: string; dark?: boolean; data?: { [key: string]: string }; htmlOptions?: {[key: string]: string | number | boolean | (() => void)}, id?: string; searchbar?: boolean; }; const DropdownContainer = (props: DropdownContainerProps) => { const { aria = {}, children, className, dark = false, data = {}, htmlOptions = {}, id, searchbar = false, } = props; const { dropdownContainerRef, filteredOptions, filterItem, handleChange, inputRef, isDropDownClosed, setFocusedOptionIndex, triggerRef } = useContext(DropdownContext); const ariaProps = buildAriaProps(aria); const dataProps = buildDataProps(data); const htmlProps = buildHtmlProps(htmlOptions); const classes = classnames( buildCss("pb_dropdown_container"), `${isDropDownClosed ? "close" : "open"}`, globalProps(props), className ); return (