import React from 'react' import classnames from 'classnames' import { FieldValues } from 'react-hook-form' import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props' import { globalProps, GlobalProps, domSafeProps } from '../utilities/globalProps' import type { InputCallback } from '../types' import { getAllIcons } from "../utilities/icons/allicons" import { withReactHookForm, WithReactHookFormProps } from '../utilities/withReactHookForm' import Body from '../pb_body/_body' import Caption from '../pb_caption/_caption' import Icon from '../pb_icon/_icon' type SelectOption = { value: string, text: string, disabled?: boolean, } type SelectProps = { aria?: { [key: string]: string }, blankSelection?: string, children?: Node, className?: string, compact?: boolean, data?: { [key: string]: string }, disabled?: boolean, error?: string, htmlOptions?: {[key: string]: string | number | boolean | (() => void)}, id?: string, includeBlank?: string, inline?: boolean, label?: string, margin?: string, marginBottom?: string, marginTop?: string, multiple?: boolean, name?: string, onChange?: InputCallback, options: SelectOption[], required?: boolean, showArrow?: boolean, value?: string, } & GlobalProps const createOptions = (options: SelectOption[]) => options.map((option, index) => ( )) const Select = React.forwardRef(({ aria = {}, blankSelection, children, className, compact = false, data = {}, disabled = false, error, label, htmlOptions = {}, inline = false, multiple = false, name, onChange, options = [], required = false, showArrow = false, value, ...props }, ref) => { const ariaProps = buildAriaProps(aria) const dataProps = buildDataProps(data) const htmlProps = buildHtmlProps(htmlOptions) const optionsList = createOptions(options) const inlineClass = inline ? 'inline' : null const compactClass = compact ? 'compact' : null const classes = classnames( buildCss("pb_select"), globalProps({ ...props, marginBottom: props.marginBottom || props.margin || "sm", }), className, inlineClass, { show_arrow: showArrow }, compactClass ); const icons = getAllIcons() const angleDown = icons?.angleDown?.icon const selectWrapperClass = classnames(buildCss('pb_select_kit_wrapper'), { error }, className) const selectBody =(() =>{ if (children) return children return ( ) })() return (
{label && }
) }) Select.displayName = 'Select' export type SelectWithHookFormProps = SelectProps & WithReactHookFormProps const SelectWithHookForm = withReactHookForm(Select) export default SelectWithHookForm