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

The React library to build dashboards faster.

'use client';
"use strict";var e=require("tslib"),r=require("react"),t=require("../../../lib/shape.cjs"),a=require("../../../lib/sizing.cjs"),o=require("../../../lib/spacing.cjs"),l=require("../../../lib/utils.cjs"),d=require("../../../lib/tremorTwMerge.cjs"),n=require("../selectUtils.cjs"),s=require("@headlessui/react"),i=require("../../../assets/ArrowDownHeadIcon.cjs");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=u(r);const m=l.makeClassName("SearchSelect"),g=c.default.forwardRef(((l,u)=>{const{defaultValue:g,value:b,onValueChange:f,placeholder:p="Select...",disabled:h=!1,icon:w,children:k,className:x}=l,v=e.__rest(l,["defaultValue","value","onValueChange","placeholder","disabled","icon","children","className"]),[N,M]=r.useState(""),q=w,C=r.useMemo((()=>n.constructValueToNameMapping(k)),[k]),T=r.useMemo((()=>n.getFilteredOptions(N,k)),[N,k]);return c.default.createElement(s.Combobox,Object.assign({as:"div",ref:u,defaultValue:g,value:b,onChange:f,disabled:h,className:d.tremorTwMerge("w-full min-w-[10rem] relative text-tremor-default",x)},v),(({value:e})=>c.default.createElement(c.default.Fragment,null,c.default.createElement(s.Combobox.Button,{className:"w-full"},q&&c.default.createElement("div",{className:d.tremorTwMerge("absolute inset-y-0 left-0 flex items-center",o.spacing.md.paddingLeft)},c.default.createElement(q,{className:d.tremorTwMerge(m("Icon"),"flex-none","text-tremor-content-subtle","dark:text-dark-tremor-content-subtle",a.sizing.lg.height,a.sizing.lg.width)})),c.default.createElement(s.Combobox.Input,{className:d.tremorTwMerge("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",q?o.spacing.fourXl.paddingLeft:o.spacing.twoXl.paddingLeft,o.spacing.fourXl.paddingRight,o.spacing.sm.paddingY,t.border.sm.all,h?"placeholder:text-tremor-content-subtle dark:placeholder:text-tremor-content-subtle":"placeholder:text-tremor-content dark:placeholder:text-tremor-content",n.getSelectButtonColors(n.hasValue(e),h)),placeholder:p,onChange:e=>M(e.target.value),displayValue:e=>{var r;return null!==(r=C.get(e))&&void 0!==r?r:""}}),c.default.createElement("div",{className:d.tremorTwMerge("absolute inset-y-0 right-0 flex items-center",o.spacing.md.paddingRight)},c.default.createElement(i,{className:d.tremorTwMerge(m("arrowDownIcon"),"flex-none","text-tremor-content-subtle","dark:text-dark-tremor-content-subtle",a.sizing.md.height,a.sizing.md.width)}))),T.length>0&&c.default.createElement(s.Combobox.Options,{className:d.tremorTwMerge("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",o.spacing.twoXs.marginTop,o.spacing.twoXs.marginBottom,t.border.sm.all)},T))))}));g.displayName="SearchSelect",module.exports=g;