UNPKG

@accelint/design-toolkit

Version:

An open-source component library to serve as part of the entire ecosystem of UX for Accelint.

4 lines (3 loc) 1.92 kB
'use client'; import {jsx,jsxs,Fragment}from'react/jsx-runtime';import'client-only';import {ChevronDown}from'@accelint/icons';import {createContext}from'react';import {useContextProps,ComboBox,composeRenderProps,Input,Button,Text,FieldError,Popover,Virtualizer,ListLayout}from'react-aria-components';import {Icon}from'../icon/index.js';import {Label}from'../label/index.js';import {Options}from'../options/index.js';import {ComboBoxStyles}from'./styles.js';const {field:q,label:w,control:H,input:A,trigger:G,description:J,error:K,popover:Q}=ComboBoxStyles(),c=createContext(null);function W({ref:t,...i}){[i,t]=useContextProps(i,t??null,c);const{children:x,classNames:e,description:a,errorMessage:b,inputProps:P,label:n,layoutOptions:v,menuTrigger:C="focus",size:m="medium",isInvalid:f,...y}=i,p=b||null,d=m==="small";return jsx(ComboBox,{...y,ref:t,className:composeRenderProps(e?.field,l=>q({className:l})),menuTrigger:C,isInvalid:f||(p?true:void 0),"data-size":m,children:({isDisabled:l,isInvalid:B,isRequired:N})=>jsxs(Fragment,{children:[!!n&&!d&&jsx(Label,{className:w({className:e?.label}),isDisabled:l,isRequired:N,children:n}),jsxs("div",{className:H({className:e?.control}),children:[jsx(Input,{...P,className:composeRenderProps(e?.input,r=>A({className:r}))}),jsx(Button,{className:composeRenderProps(e?.trigger,r=>G({className:r})),children:jsx(Icon,{size:"small",children:jsx(ChevronDown,{})})})]}),!!a&&!(d||B)&&jsx(Text,{className:J({className:e?.description}),slot:"description",children:a}),jsx(FieldError,{className:composeRenderProps(e?.error,r=>K({className:r})),children:p}),jsx(Popover,{className:composeRenderProps(e?.popover,r=>Q({className:r})),children:jsx(Virtualizer,{layout:ListLayout,layoutOptions:v,children:jsx(Options,{children:x})})})]})})}W.displayName="ComboBox";export{W as ComboBoxField,c as ComboBoxFieldContext};//# sourceMappingURL=index.js.map //# sourceMappingURL=index.js.map