import React, { forwardRef } 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 { HookFormProps, withHookForm } from '../utilities/hookFormProps' import type { InputCallback } from '../types' import { getAllIcons } from "../utilities/icons/allicons" 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 & Partial> const createOptions = (options: SelectOption[]) => options.map((option, index) => ( )) const Select = ({ aria = {}, blankSelection, children, className, compact = false, data = {}, disabled = false, error, label, htmlOptions = {}, inline = false, multiple = false, name, onChange, options = [], register, required = false, rules, showArrow = false, value, ...props }: SelectProps, ref: React.LegacyRef) => { const ariaProps = buildAriaProps(aria) const dataProps = buildDataProps(data) const htmlProps = buildHtmlProps(htmlOptions) const optionsList = createOptions(options) const hookFormProps = name ? withHookForm({ register, name, rules }) : {} 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 as { [key: string]: SVGElement } const selectWrapperClass = classnames(buildCss('pb_select_kit_wrapper'), { error }, className) const selectBody =(() =>{ if (children) return children return ( ) })() return (
{label && }
) } export default forwardRef(Select)