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

The React library to build dashboards faster.

'use client';
import{__rest as e}from"tslib";import r from"../../../assets/ArrowDownHeadIcon.js";import t,{useMemo as a}from"react";import o from"../../../assets/XCircleIcon.js";import{border as l}from"../../../lib/shape.js";import{sizing as n}from"../../../lib/sizing.js";import{spacing as d}from"../../../lib/spacing.js";import{makeClassName as s}from"../../../lib/utils.js";import{tremorTwMerge as m}from"../../../lib/tremorTwMerge.js";import{constructValueToNameMapping as i,getSelectButtonColors as c,hasValue as u}from"../selectUtils.js";import{Listbox as b}from"@headlessui/react";import f from"../../../hooks/useInternalState.js";const p=s("Select"),g=t.forwardRef(((s,g)=>{const{defaultValue:h,value:k,onValueChange:w,placeholder:x="Select...",disabled:v=!1,icon:N,enableClear:E=!1,children:j,className:y}=s,C=e(s,["defaultValue","value","onValueChange","placeholder","disabled","icon","enableClear","children","className"]),[X,I]=f(h,k),V=N,R=a((()=>i(j)),[j]);return t.createElement(b,Object.assign({as:"div",ref:g,defaultValue:X,value:X,onChange:e=>{null==w||w(e),I(e)},disabled:v,className:m("w-full min-w-[10rem] relative text-tremor-default",y)},C),(({value:e})=>{var a;return t.createElement(t.Fragment,null,t.createElement(b.Button,{className:m("w-full outline-none text-left whitespace-nowrap truncate rounded-tremor-default focus:ring-2 transition duration-100","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",V?d.fourXl.paddingLeft:d.twoXl.paddingLeft,d.fourXl.paddingRight,d.sm.paddingY,l.sm.all,c(u(e),v))},V&&t.createElement("span",{className:m("absolute inset-y-0 left-0 flex items-center",d.md.paddingLeft)},t.createElement(V,{className:m(p("Icon"),"flex-none","text-tremor-content-subtle","dark:text-dark-tremor-content-subtle",n.lg.height,n.lg.width)})),t.createElement("span",{className:"w-[90%] block truncate"},e&&null!==(a=R.get(e))&&void 0!==a?a:x),t.createElement("span",{className:m("absolute inset-y-0 right-0 flex items-center",d.md.marginRight)},t.createElement(r,{className:m(p("arrowDownIcon"),"flex-none","text-tremor-content-subtle","dark:text-dark-tremor-content-subtle",n.md.height,n.md.width)}))),E&&X?t.createElement("button",{type:"button",className:m("absolute inset-y-0 right-0 flex items-center",d.fourXl.marginRight),onClick:e=>{e.preventDefault(),I(""),null==w||w("")}},t.createElement(o,{className:m(p("clearIcon"),"flex-none","text-tremor-content-subtle","dark:text-dark-tremor-content-subtle",n.md.height,n.md.width)})):null,t.createElement(b.Options,{className:m("absolute z-10 divide-y overflow-y-auto max-h-[228px] w-full left-0 outline-none rounded-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,l.sm.all)},j))}))}));g.displayName="Select";export{g as default};