chakra-combobox/dist/index.umd.js

A combobox componente for Chakra UI.

(function(I,f){typeof exports=="object"&&typeof module<"u"?f(exports,require("react"),require("@chakra-ui/react"),require("@tanstack/react-virtual")):typeof define=="function"&&define.amd?define(["exports","react","@chakra-ui/react","@tanstack/react-virtual"],f):(I=typeof globalThis<"u"?globalThis:I||self,f(I["chakra-combobox"]={},I.React,I.ChakraUI,I.TanstackReactVirtual))})(this,function(I,f,t,se){"use strict";function ie(r){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const i in r)if(i!=="default"){const a=Object.getOwnPropertyDescriptor(r,i);Object.defineProperty(s,i,a.get?a:{enumerable:!0,get:()=>r[i]})}}return s.default=r,Object.freeze(s)}const q=ie(f);var B={exports:{}},L={};/**
 * @license React
 * react-jsx-runtime.production.js
 *
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */var K;function le(){if(K)return L;K=1;var r=Symbol.for("react.transitional.element"),s=Symbol.for("react.fragment");function i(a,u,c){var m=null;if(c!==void 0&&(m=""+c),u.key!==void 0&&(m=""+u.key),"key"in u){c={};for(var p in u)p!=="key"&&(c[p]=u[p])}else c=u;return u=c.ref,{$$typeof:r,type:a,key:m,ref:u!==void 0?u:null,props:c}}return L.Fragment=s,L.jsx=i,L.jsxs=i,L}var Y={};/**
 * @license React
 * react-jsx-runtime.development.js
 *
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */var ee;function ae(){return ee||(ee=1,process.env.NODE_ENV!=="production"&&function(){function r(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===J?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case w:return"Fragment";case N:return"Profiler";case A:return"StrictMode";case W:return"Suspense";case D:return"SuspenseList";case O:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case j:return"Portal";case F:return(e.displayName||"Context")+".Provider";case S:return(e._context.displayName||"Context")+".Consumer";case R:var o=e.render;return e=e.displayName,e||(e=o.displayName||o.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case V:return o=e.displayName||null,o!==null?o:r(e.type)||"Memo";case T:o=e._payload,e=e._init;try{return r(e(o))}catch{}}return null}function s(e){return""+e}function i(e){try{s(e);var o=!1}catch{o=!0}if(o){o=console;var d=o.error,x=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return d.call(o,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",x),s(e)}}function a(e){if(e===w)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===T)return"<...>";try{var o=r(e);return o?"<"+o+">":"<...>"}catch{return"<...>"}}function u(){var e=$.A;return e===null?null:e.getOwner()}function c(){return Error("react-stack-top-frame")}function m(e){if(G.call(e,"key")){var o=Object.getOwnPropertyDescriptor(e,"key").get;if(o&&o.isReactWarning)return!1}return e.key!==void 0}function p(e,o){function d(){v||(v=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",o))}d.isReactWarning=!0,Object.defineProperty(e,"key",{get:d,configurable:!0})}function h(){var e=r(this.type);return U[e]||(U[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function g(e,o,d,x,y,k,H,Z){return d=k.ref,e={$$typeof:l,type:e,key:o,props:k,_owner:y},(d!==void 0?d:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:h}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:H}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:Z}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function C(e,o,d,x,y,k,H,Z){var b=o.children;if(b!==void 0)if(x)if(X(b)){for(x=0;x<b.length;x++)_(b[x]);Object.freeze&&Object.freeze(b)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else _(b);if(G.call(o,"key")){b=r(e);var M=Object.keys(o).filter(function(Ce){return Ce!=="key"});x=0<M.length?"{key: someKey, "+M.join(": ..., ")+": ...}":"{key: someKey}",oe[b+x]||(M=0<M.length?"{"+M.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
  let props = %s;
  <%s {...props} />
React keys must be passed directly to JSX without using spread:
  let props = %s;
  <%s key={someKey} {...props} />`,x,b,M,b),oe[b+x]=!0)}if(b=null,d!==void 0&&(i(d),b=""+d),m(o)&&(i(o.key),b=""+o.key),"key"in o){d={};for(var Q in o)Q!=="key"&&(d[Q]=o[Q])}else d=o;return b&&p(d,typeof e=="function"?e.displayName||e.name||"Unknown":e),g(e,b,k,y,u(),d,H,Z)}function _(e){typeof e=="object"&&e!==null&&e.$$typeof===l&&e._store&&(e._store.validated=1)}var E=f,l=Symbol.for("react.transitional.element"),j=Symbol.for("react.portal"),w=Symbol.for("react.fragment"),A=Symbol.for("react.strict_mode"),N=Symbol.for("react.profiler"),S=Symbol.for("react.consumer"),F=Symbol.for("react.context"),R=Symbol.for("react.forward_ref"),W=Symbol.for("react.suspense"),D=Symbol.for("react.suspense_list"),V=Symbol.for("react.memo"),T=Symbol.for("react.lazy"),O=Symbol.for("react.activity"),J=Symbol.for("react.client.reference"),$=E.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,G=Object.prototype.hasOwnProperty,X=Array.isArray,z=console.createTask?console.createTask:function(){return null};E={react_stack_bottom_frame:function(e){return e()}};var v,U={},re=E.react_stack_bottom_frame.bind(E,c)(),ne=z(a(c)),oe={};Y.Fragment=w,Y.jsx=function(e,o,d,x,y){var k=1e4>$.recentlyCreatedOwnerStacks++;return C(e,o,d,!1,x,y,k?Error("react-stack-top-frame"):re,k?z(a(e)):ne)},Y.jsxs=function(e,o,d,x,y){var k=1e4>$.recentlyCreatedOwnerStacks++;return C(e,o,d,!0,x,y,k?Error("react-stack-top-frame"):re,k?z(a(e)):ne)}}()),Y}var te;function ue(){return te||(te=1,process.env.NODE_ENV==="production"?B.exports=le():B.exports=ae()),B.exports}var n=ue();const ce=t.createIcon({displayName:"MagnifyingGlass",viewBox:"0 0 256 256",d:"M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z",defaultProps:{fill:"currentColor",height:"32",width:"32"}}),de=t.createIcon({displayName:"CaretDown",viewBox:"0 0 256 256",d:"M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z",defaultProps:{fill:"currentColor",height:"32",width:"32"}}),fe=t.createIcon({displayName:"LuX",viewBox:"0 0 24 24",d:"M18 6 L6 18 M6 6 L18 18",defaultProps:{width:"24",height:"24",stroke:"currentColor",strokeWidth:"2"}});t.createIcon({displayName:"LuCheck",viewBox:"0 0 24 24",d:"M20 6 L9 17 L4 12",defaultProps:{width:"24",height:"24",stroke:"currentColor",strokeWidth:"2"}}),t.createIcon({displayName:"LuChevronRight",viewBox:"0 0 24 24",d:"M9 18 L15 12 L9 6",defaultProps:{width:"24",height:"24",stroke:"currentColor",strokeWidth:"2"}});const me=f.memo(({customIcon:r,dropdownIndicatorCss:s,...i})=>{const a=s?s({}):{};return n.jsx(t.Icon,{as:r||de,boxSize:4,className:"dropdown-indicator",...i,css:a})});function pe(r,s){let i;return function(...a){clearTimeout(i),i=setTimeout(()=>r(...a),s)}}const P=(r,s)=>s?s(r):r;function he(r,s){let i=0;return function(...a){const u=Date.now();u-i>=s&&(i=u,r(...a))}}function xe({count:r,onScrollEnd:s,isLoading:i,isFetchingNextPage:a,hasNextPage:u}){const c=f.useRef(null),m=f.useRef(null),p=()=>{m.current&&(clearTimeout(m.current),m.current=null)},h=se.useVirtualizer({count:r,getScrollElement:()=>c.current,estimateSize:()=>32,overscan:10,gap:4}),g=t.useLiveRef(h),C=l=>{p();const j=()=>{const w=g.current;if(w?.getVirtualItems()?.find(S=>S.index===l.index)){l.getElement()?.scrollIntoView({block:"end"}),p();return}w?.scrollToIndex(l.index),l.immediate||(m.current=setTimeout(j,16))};j()};f.useEffect(()=>p,[]);const _=h.getTotalSize(),E=f.useCallback(he(()=>{const l=c.current;l&&l.scrollTop+l.clientHeight>=l.scrollHeight-10&&u&&!i&&!a&&s()},0),[i,a,u,s]);return f.useEffect(()=>{const l=c.current;if(l)return l.addEventListener("scroll",E),()=>{l.removeEventListener("scroll",E)}},[E]),{scrollRef:c,scrollToIndexFn:C,totalSize:_,virtualItems:h.getVirtualItems(),getViewportProps(l={}){return{style:{height:"200px",position:"relative",width:"100%",...l.style},...l}},getItemProps(l){const{virtualItem:j,...w}=l;return{...w,"aria-posinset":j.index+1,"aria-setsize":_,style:{position:"absolute",top:0,left:0,width:"100%",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",...w.style,height:`${j.size}px`,transform:`translateY(${j.start}px)`}}}}}const be=q.forwardRef(function(s,i){const{startElement:a,startElementProps:u,endElement:c,endElementProps:m,children:p,startOffset:h="6px",endOffset:g="6px",...C}=s,_=q.Children.only(p);return n.jsxs(t.Group,{ref:i,...C,children:[a&&n.jsx(t.InputElement,{pointerEvents:"none",...u,children:a}),q.cloneElement(_,{...a&&{ps:`calc(var(--input-height) - ${h})`},...c&&{pe:`calc(var(--input-height) - ${g})`},...p.props}),c&&n.jsx(t.InputElement,{placement:"end",...m,children:c})]})}),ve=f.memo(({inputCss:r,...s})=>{const i=P({w:"full",borderRadius:"0",borderWidth:"0",_active:{borderColor:"transparent",outline:"none"},_focus:{borderColor:"transparent",outline:"none",boxShadow:"none"},h:"45px",fontSize:"md"},r);return n.jsx(be,{w:"full",startElement:n.jsx(t.Icon,{as:ce,boxSize:5,css:{h:i.h}}),children:n.jsx(t.Input,{ps:"40px",...s,css:i})})});function Ee({options:r,searchInputPlaceholder:s,value:i,isLoading:a,isFetchingNextPage:u,hasNextPage:c,loadingElement:m,emptyElement:p,listboxProps:h,withCheckmark:g=!1,withIndicator:C=!0,searchValue:_,getOptionLabel:E,getOptionValue:l,fetchNextPage:j,onSelect:w,onInputChange:A,inputCss:N,emptyMessageCss:S,loadingMessageCss:F}){const R=xe({count:r.length,onScrollEnd:j,isLoading:a,isFetchingNextPage:u,hasNextPage:c}),W=f.useMemo(()=>t.createListCollection({items:r,itemToString:T=>E(T),itemToValue:T=>l(T)}),[r,l,E]),D=P({py:2,px:2,fontSize:"md"},S),V=P({py:2,px:2,fontSize:"md"},F);return n.jsxs(t.Listbox.Root,{...h?.Root,maxW:"full",collection:W,scrollToIndexFn:R.scrollToIndexFn,gap:"0",value:i,onValueChange:T=>{w(T.value)},children:[n.jsx(t.Box,{px:"10px",borderBottomWidth:"1px",borderColor:"inherit",w:"full",children:n.jsx(ve,{placeholder:s,onChange:A,inputCss:N,value:_})}),n.jsx(t.Show,{when:R.totalSize>0,children:n.jsx(t.Listbox.Content,{ref:R.scrollRef,border:"none",...h?.Content,children:n.jsx(t.Box,{...R.getViewportProps(),children:R.virtualItems.map(T=>{const O=r[T.index];return f.createElement(t.Listbox.Item,{...h?.Item,key:l(O),item:O,...R.getItemProps({virtualItem:T})},g&&n.jsx(Te,{...h?.Checkmark}),n.jsx(t.Listbox.ItemText,{...h?.ItemText,children:E(O)}),C&&!g&&n.jsx(t.Listbox.ItemIndicator,{...h?.ItemIndicator}))})})})}),n.jsx(t.Show,{when:R.totalSize===0&&!a&&!u,children:typeof p=="string"?n.jsx(t.Flex,{css:D,children:n.jsx(t.Text,{children:p})}):p}),n.jsx(t.Show,{when:a,children:typeof m=="string"?n.jsx(t.Flex,{css:V,children:n.jsx(t.Text,{children:m})}):m})]})}const Te=r=>{const s=t.useListboxItemContext();return n.jsx(t.Checkmark,{filled:!0,size:"sm",checked:s.selected,disabled:s.disabled,...r})};function ge({getOptionLabel:r,getOptionValue:s,isLoading:i,isFetchingNextPage:a,hasNextPage:u,onBlur:c,onSearchChange:m,fetchNextPage:p,options:h,value:g,onSelect:C,placeholder:_,dropdownIndicator:E,chakraStyles:l,isClearable:j=!1,loadingElement:w="Loading...",emptyElement:A="No results found",searchInputPlaceholder:N="Search...",closeOnSelect:S=!1,insideDialog:F=!1,listboxProps:R,withIndicator:W,withCheckmark:D}){const[V,T]=f.useState(!1),[O,J]=f.useState(""),$=f.useMemo(()=>pe(v=>{m(v.target.value)},500),[]),G=P({p:0,overflow:"hidden"},l?.popoverContentCss),X=P({p:0,minW:6,h:6},l?.clearButton),z=g?.map(v=>r(h.find(U=>s(U)===v)||{}))||[];return n.jsxs(t.Popover.Root,{open:V,onOpenChange:v=>T(v.open),positioning:{sameWidth:!0},lazyMount:!0,unmountOnExit:!0,onExitComplete:c,children:[n.jsx(t.Popover.Trigger,{asChild:!0,children:n.jsxs(we,{controlCss:l?.control,children:[n.jsx(t.Text,{lineClamp:1,children:z.length>0&&z.join(", ")||_}),n.jsxs(t.Flex,{gap:2,align:"center",children:[(i||a)&&n.jsx(t.Spinner,{size:"sm"}),n.jsxs(t.Flex,{gap:1,align:"center",children:[j&&g&&g.length>0&&n.jsx(t.Button,{as:"span",size:"xs",variant:"ghost",css:X,onClick:v=>{v.stopPropagation(),C([])},children:n.jsx(t.Icon,{boxSize:4,as:fe})}),n.jsx(me,{customIcon:E,dropdownIndicatorCss:l?.dropdownIndicator})]})]})]})}),n.jsx(t.Portal,{disabled:F,children:n.jsx(t.Popover.Positioner,{children:n.jsx(t.Popover.Content,{width:"auto",minH:h.length>7?"250px":"auto",css:G,children:n.jsx(Ee,{options:h,getOptionLabel:r,getOptionValue:s,searchInputPlaceholder:N,onInputChange:v=>{J(v.target.value),$(v)},value:g||[],onSelect:v=>{C(v),S&&T(!1)},isLoading:i,isFetchingNextPage:a,fetchNextPage:p,hasNextPage:u,loadingElement:w,emptyElement:A,loadingMessageCss:l?.loadingMessage,emptyMessageCss:l?.emptyMessage,inputCss:l?.input,listboxProps:R,withIndicator:W,withCheckmark:D,searchValue:O})})})})]})}const je=f.memo(ge),we=f.memo(({controlCss:r,...s})=>{const i=P({"&[aria-expanded='true']":{"& .dropdown-indicator":{transform:"rotate(180deg)"}},"& .dropdown-indicator":{transition:"transform 0.1s ease-in-out"},justifyContent:"space-between",textAlign:"left",borderWidth:"1px",borderColor:"black",borderRadius:"md",fontSize:"md",color:"black",bg:"transparent",_hover:{bg:"transparent"},_active:{bg:"transparent"}},r);return n.jsx(t.Button,{...s,css:i,children:s.children})});I.AsyncCombobox=je,Object.defineProperty(I,Symbol.toStringTag,{value:"Module"})});