@while-and-for/tremor-react/dist/components/input-elements/SearchSelect/SearchSelect.js

The React library to build dashboards faster.

'use client';
import{__rest as e}from"tslib";import r,{useState as t,useMemo as o}from"react";import{border as a}from"../../../lib/shape.js";import{sizing as l}from"../../../lib/sizing.js";import{spacing as d}from"../../../lib/spacing.js";import{makeClassName as n}from"../../../lib/utils.js";import{tremorTwMerge as m}from"../../../lib/tremorTwMerge.js";import{constructValueToNameMapping as s,getFilteredOptions as i,getSelectButtonColors as c,hasValue as u}from"../selectUtils.js";import{Combobox as f}from"@headlessui/react";import b from"../../../assets/ArrowDownHeadIcon.js";const p=n("SearchSelect"),g=r.forwardRef(((n,g)=>{const{defaultValue:h,value:w,onValueChange:k,placeholder:x="Select...",disabled:v=!1,icon:N,children:E,className:j}=n,y=e(n,["defaultValue","value","onValueChange","placeholder","disabled","icon","children","className"]),[V,S]=t(""),X=N,C=o((()=>s(E)),[E]),I=o((()=>i(V,E)),[V,E]);return r.createElement(f,Object.assign({as:"div",ref:g,defaultValue:h,value:w,onChange:k,disabled:v,className:m("w-full min-w-[10rem] relative text-tremor-default",j)},y),(({value:e})=>r.createElement(r.Fragment,null,r.createElement(f.Button,{className:"w-full"},X&&r.createElement("div",{className:m("absolute inset-y-0 left-0 flex items-center",d.md.paddingLeft)},r.createElement(X,{className:m(p("Icon"),"flex-none","text-tremor-content-subtle","dark:text-dark-tremor-content-subtle",l.lg.height,l.lg.width)})),r.createElement(f.Input,{className:m("w-full outline-none text-left whitespace-nowrap truncate rounded-tremor-default focus:ring-2 transition duration-100 text-tremor-default","border-tremor-border shadow-tremor-input focus:border-tremor-brand-subtle focus:ring-tremor-brand-muted","dark:border-dark-tremor-border dark:shadow-dark-tremor-input dark:focus:border-dark-tremor-brand-subtle dark:focus:ring-dark-tremor-brand-muted",X?d.fourXl.paddingLeft:d.twoXl.paddingLeft,d.fourXl.paddingRight,d.sm.paddingY,a.sm.all,v?"placeholder:text-tremor-content-subtle dark:placeholder:text-tremor-content-subtle":"placeholder:text-tremor-content dark:placeholder:text-tremor-content",c(u(e),v)),placeholder:x,onChange:e=>S(e.target.value),displayValue:e=>{var r;return null!==(r=C.get(e))&&void 0!==r?r:""}}),r.createElement("div",{className:m("absolute inset-y-0 right-0 flex items-center",d.md.paddingRight)},r.createElement(b,{className:m(p("arrowDownIcon"),"flex-none","text-tremor-content-subtle","dark:text-dark-tremor-content-subtle",l.md.height,l.md.width)}))),I.length>0&&r.createElement(f.Options,{className:m("absolute z-10 divide-y overflow-y-auto max-h-[228px] w-full left-0 outline-none rounded-tremor-default text-tremor-default","bg-tremor-background border-tremor-border divide-tremor-border shadow-tremor-dropdown","dark:bg-dark-tremor-background dark:border-dark-tremor-border dark:divide-dark-tremor-border dark:shadow-dark-tremor-dropdown",d.twoXs.marginTop,d.twoXs.marginBottom,a.sm.all)},I))))}));g.displayName="SearchSelect";export{g as default};