chakra-combobox/dist/index.umd.js

A combobox componente for Chakra UI.

(function(g,p){typeof exports=="object"&&typeof module<"u"?p(exports,require("react"),require("@chakra-ui/react"),require("@radix-ui/react-scroll-area"),require("@tanstack/react-virtual")):typeof define=="function"&&define.amd?define(["exports","react","@chakra-ui/react","@radix-ui/react-scroll-area","@tanstack/react-virtual"],p):(g=typeof globalThis<"u"?globalThis:g||self,p(g["chakra-combobox"]={},g.React,g.ChakraUI,g.RadixScrollArea,g.TanstackReactVirtual))})(this,function(g,p,s,N,le){"use strict";function ce(r){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const n in r)if(n!=="default"){const a=Object.getOwnPropertyDescriptor(r,n);Object.defineProperty(t,n,a.get?a:{enumerable:!0,get:()=>r[n]})}}return t.default=r,Object.freeze(t)}const _=ce(p);var G={exports:{}},M={};/**
 * @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 ue(){if(K)return M;K=1;var r=Symbol.for("react.transitional.element"),t=Symbol.for("react.fragment");function n(a,l,c){var u=null;if(c!==void 0&&(u=""+c),l.key!==void 0&&(u=""+l.key),"key"in l){c={};for(var x in l)x!=="key"&&(c[x]=l[x])}else c=l;return l=c.ref,{$$typeof:r,type:a,key:u,ref:l!==void 0?l:null,props:c}}return M.Fragment=t,M.jsx=n,M.jsxs=n,M}var B={};/**
 * @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 de(){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===$?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case k:return"Fragment";case Y:return"Profiler";case D:return"StrictMode";case W:return"Suspense";case V:return"SuspenseList";case J: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 L:return"Portal";case P:return(e.displayName||"Context")+".Provider";case y:return(e._context.displayName||"Context")+".Consumer";case A:var i=e.render;return e=e.displayName,e||(e=i.displayName||i.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case v:return i=e.displayName||null,i!==null?i:r(e.type)||"Memo";case U:i=e._payload,e=e._init;try{return r(e(i))}catch{}}return null}function t(e){return""+e}function n(e){try{t(e);var i=!1}catch{i=!0}if(i){i=console;var d=i.error,m=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return d.call(i,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",m),t(e)}}function a(e){if(e===k)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===U)return"<...>";try{var i=r(e);return i?"<"+i+">":"<...>"}catch{return"<...>"}}function l(){var e=O.A;return e===null?null:e.getOwner()}function c(){return Error("react-stack-top-frame")}function u(e){if(H.call(e,"key")){var i=Object.getOwnPropertyDescriptor(e,"key").get;if(i&&i.isReactWarning)return!1}return e.key!==void 0}function x(e,i){function d(){te||(te=!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)",i))}d.isReactWarning=!0,Object.defineProperty(e,"key",{get:d,configurable:!0})}function C(){var e=r(this.type);return ne[e]||(ne[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 j(e,i,d,m,R,T,X,Z){return d=T.ref,e={$$typeof:S,type:e,key:i,props:T,_owner:R},(d!==void 0?d:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:C}):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:X}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:Z}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function E(e,i,d,m,R,T,X,Z){var h=i.children;if(h!==void 0)if(m)if(I(h)){for(m=0;m<h.length;m++)w(h[m]);Object.freeze&&Object.freeze(h)}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 w(h);if(H.call(i,"key")){h=r(e);var z=Object.keys(i).filter(function(Be){return Be!=="key"});m=0<z.length?"{key: someKey, "+z.join(": ..., ")+": ...}":"{key: someKey}",ae[h+m]||(z=0<z.length?"{"+z.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} />`,m,h,z,h),ae[h+m]=!0)}if(h=null,d!==void 0&&(n(d),h=""+d),u(i)&&(n(i.key),h=""+i.key),"key"in i){d={};for(var Q in i)Q!=="key"&&(d[Q]=i[Q])}else d=i;return h&&x(d,typeof e=="function"?e.displayName||e.name||"Unknown":e),j(e,h,T,R,l(),d,X,Z)}function w(e){typeof e=="object"&&e!==null&&e.$$typeof===S&&e._store&&(e._store.validated=1)}var f=p,S=Symbol.for("react.transitional.element"),L=Symbol.for("react.portal"),k=Symbol.for("react.fragment"),D=Symbol.for("react.strict_mode"),Y=Symbol.for("react.profiler"),y=Symbol.for("react.consumer"),P=Symbol.for("react.context"),A=Symbol.for("react.forward_ref"),W=Symbol.for("react.suspense"),V=Symbol.for("react.suspense_list"),v=Symbol.for("react.memo"),U=Symbol.for("react.lazy"),J=Symbol.for("react.activity"),$=Symbol.for("react.client.reference"),O=f.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,H=Object.prototype.hasOwnProperty,I=Array.isArray,q=console.createTask?console.createTask:function(){return null};f={"react-stack-bottom-frame":function(e){return e()}};var te,ne={},se=f["react-stack-bottom-frame"].bind(f,c)(),ie=q(a(c)),ae={};B.Fragment=k,B.jsx=function(e,i,d,m,R){var T=1e4>O.recentlyCreatedOwnerStacks++;return E(e,i,d,!1,m,R,T?Error("react-stack-top-frame"):se,T?q(a(e)):ie)},B.jsxs=function(e,i,d,m,R){var T=1e4>O.recentlyCreatedOwnerStacks++;return E(e,i,d,!0,m,R,T?Error("react-stack-top-frame"):se,T?q(a(e)):ie)}}()),B}var re;function fe(){return re||(re=1,process.env.NODE_ENV==="production"?G.exports=ue():G.exports=de()),G.exports}var o=fe();const pe=s.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"}}),me=s.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"}}),oe=s.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"}});s.createIcon({displayName:"LuCheck",viewBox:"0 0 24 24",d:"M20 6 L9 17 L4 12",defaultProps:{width:"24",height:"24",stroke:"currentColor",strokeWidth:"2"}}),s.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 he=_.forwardRef(function(t,n){const{startElement:a,startElementProps:l,endElement:c,endElementProps:u,children:x,startOffset:C="6px",endOffset:j="6px",...E}=t,w=_.Children.only(x);return o.jsxs(s.Group,{ref:n,...E,children:[a&&o.jsx(s.InputElement,{pointerEvents:"none",...l,children:a}),_.cloneElement(w,{...a&&{ps:`calc(var(--input-height) - ${C})`},...c&&{pe:`calc(var(--input-height) - ${j})`},...x.props}),c&&o.jsx(s.InputElement,{placement:"end",...u,children:c})]})}),b=(r,t)=>t?t(r):r,xe=p.memo(({inputCss:r,...t})=>{const n=b({w:"full",borderRadius:"0",borderWidth:"0",_active:{borderColor:"transparent",outline:"none"},_focus:{borderColor:"transparent",outline:"none",boxShadow:"none"},h:"45px",fontSize:"md"},r);return o.jsx(he,{startElement:o.jsx(s.Icon,{as:pe,boxSize:5,css:{h:n.h}}),children:o.jsx(s.Input,{ps:"40px",...t,css:n})})}),be=({...r})=>o.jsx(s.Box,{as:N.Corner,...r}),ve=({children:r,css:t,...n})=>o.jsx(s.Box,{as:N.Root,maxH:"225px",h:"full",overflow:"hidden",...n,css:{"--scrollbar-size":"10px",...t},children:r}),ge=({children:r,...t})=>o.jsx(s.Box,{as:N.Scrollbar,...t,userSelect:"none",display:"flex",children:r}),Ce=({css:r,...t})=>o.jsx(s.Box,{as:N.Thumb,...t,flex:"1",css:{...r,borderRadius:"var(--scrollbar-size)"}}),je=p.forwardRef((r,t)=>o.jsx(s.Box,{as:N.Viewport,ref:t,w:"100%",maxH:"225px",h:"full",borderRadius:"inherit",px:"calc(var(--scrollbar-size) + 4px)",...r,children:r.children})),F={Root:ve,Viewport:je,Scrollbar:ge,Thumb:Ce,Corner:be};function Ee(r,t){let n=0;return function(...a){const l=Date.now();l-n>=t&&(n=l,r(...a))}}const Te=({onScrollEnd:r,isLoading:t,isFetchingNextPage:n,hasNextPage:a})=>{const l=p.useRef(null),c=p.useCallback(Ee(()=>{const u=l.current;u&&u.scrollTop+u.clientHeight>=u.scrollHeight-10&&a&&!t&&!n&&r()},0),[t,n,a,r]);return p.useEffect(()=>{const u=l.current;if(u)return u.addEventListener("scroll",c),()=>{u.removeEventListener("scroll",c)}},[c]),l};function we({options:r,value:t,onSelect:n,getOptionLabel:a,getOptionValue:l,isLoading:c,isFetchingNextPage:u,fetchNextPage:x,hasNextPage:C,loadingElement:j="Loading...",emptyElement:E="No results found",scrollAreaCss:w,optionCss:f,scrollbarCss:S,scrollThumbCss:L,scrollCornerCss:k,emptyMessageCss:D,loadingMessageCss:Y}){const y=Te({onScrollEnd:x,isLoading:c,isFetchingNextPage:u,hasNextPage:C}),P=le.useVirtualizer({count:r.length,getScrollElement:()=>y.current,estimateSize:()=>40,gap:4,paddingStart:4,paddingEnd:4,overscan:5}),A=P.getVirtualItems(),W=b({p:"2px",bg:"whiteAlpha.300",transition:"background 160ms ease-out",_hover:{bg:"whiteAlpha.400"},touchAction:"none",'&[data-orientation="vertical"]':{width:"var(--scrollbar-size)"},'&[data-orientation="horizontal"]':{flexDirection:"column",height:"var(--scrollbar-size)"}},S),V=b({bg:"gray.200",position:"relative",_before:{content:'""',position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",width:"100%",height:"100%",minWidth:"44px",minHeight:"44px"}},L),v=b({bg:"blackAlpha.500"},k),U=b({py:2,px:2,fontSize:"md"},Y),J=b({py:2,px:2,fontSize:"md"},D),$=b({},w),O=$.maxH||$.maxHeight;return o.jsxs(F.Root,{css:$,children:[o.jsxs(F.Viewport,{ref:y,...O&&{maxH:O},children:[A.length>0&&o.jsx(s.Box,{h:`${P.getTotalSize()}px`,w:"full",position:"relative",children:A.map(H=>{const I=r[H.index],q=t&&l(t)===l(I)||!1;return o.jsx(ke,{option:I,isSelected:q,onSelect:n,label:a(I),virtualRowStart:H.start,css:f},l(I))})}),A.length===0&&!c&&!u&&o.jsx(o.Fragment,{children:typeof E=="string"?o.jsx(s.Flex,{css:J,children:o.jsx(s.Text,{children:E})}):E}),c&&o.jsx(o.Fragment,{children:typeof j=="string"?o.jsx(s.Flex,{css:U,children:o.jsx(s.Text,{children:j})}):j})]}),o.jsx(F.Scrollbar,{orientation:"vertical",css:W,children:o.jsx(F.Thumb,{css:V})}),o.jsx(F.Corner,{css:v})]})}const Re=p.memo(we);function _e({option:r,isSelected:t,onSelect:n,label:a,virtualRowStart:l,css:c}){const u=b({py:2.5,px:2,position:"absolute",top:0,left:0,width:"100%",transform:`translateY(${l}px)`,_hover:{bg:"gray.100",color:"gray.900"},cursor:"pointer",borderRadius:"4px",transition:"all 0.2s ease-in-out",bg:"transparent",color:"inherit",_selected:{bg:"gray.100",color:"gray.900"},backfaceVisibility:"hidden",fontSize:"md"},c);return o.jsx(s.Text,{as:"option",...t&&{"data-selected":!0},onClick:()=>n(r),css:u,children:a})}const ke=p.memo(_e),Pe=p.memo(({customIcon:r,dropdownIndicatorCss:t,...n})=>{const a=t?t({}):{};return o.jsx(s.Icon,{as:r||me,boxSize:4,className:"dropdown-indicator",...n,css:a})});function Ae(r,t){let n;return function(...a){clearTimeout(n),n=setTimeout(()=>r(...a),t)}}const Se=_.forwardRef(function(t,n){return o.jsx(s.IconButton,{variant:"ghost","aria-label":"Close",ref:n,...t,children:t.children??o.jsx(oe,{})})}),ye=_.forwardRef(function(t,n){const{portalled:a=!0,portalRef:l,...c}=t;return o.jsx(s.Portal,{disabled:!a,container:l,children:o.jsx(s.Popover.Positioner,{children:o.jsx(s.Popover.Content,{ref:n,...c})})})});_.forwardRef(function(t,n){return o.jsx(s.Popover.Arrow,{...t,ref:n,children:o.jsx(s.Popover.ArrowTip,{})})}),_.forwardRef(function(t,n){return o.jsx(s.Popover.CloseTrigger,{position:"absolute",top:"1",insetEnd:"1",...t,asChild:!0,ref:n,children:o.jsx(Se,{size:"sm"})})}),s.Popover.Title,s.Popover.Description,s.Popover.Footer,s.Popover.Header;const Oe=s.Popover.Root;s.Popover.Body;const Ie=s.Popover.Trigger;function ze({getOptionLabel:r,getOptionValue:t,isLoading:n,isFetchingNextPage:a,hasNextPage:l,onSearchChange:c,fetchNextPage:u,options:x,value:C,onSelect:j,placeholder:E,dropdownIndicator:w,chakraStyles:f,loadingElement:S,emptyElement:L,isClearable:k=!1,searchInputPlaceholder:D="Search...",closeOnSelect:Y=!0}){const[y,P]=p.useState(!1),A=p.useMemo(()=>Ae(v=>{c(v.target.value)},500),[]),W=b({p:0,overflow:"hidden"},f?.menuList),V=b({p:0,minW:6,h:6},f?.clearButton);return o.jsxs(Oe,{open:y,onOpenChange:v=>P(v.open),positioning:{sameWidth:!0},lazyMount:!0,unmountOnExit:!0,children:[o.jsxs(Me,{controlCss:f?.control,children:[o.jsx(s.Text,{lineClamp:1,children:C&&r(C)||E}),o.jsxs(s.Flex,{gap:2,align:"center",children:[(n||a)&&o.jsx(s.Spinner,{size:"sm"}),o.jsxs(s.Flex,{gap:1,align:"center",children:[k&&C&&o.jsx(s.Button,{size:"xs",variant:"ghost",css:V,onClick:v=>{v.stopPropagation(),j(void 0)},children:o.jsx(s.Icon,{boxSize:4,as:oe})}),o.jsx(Pe,{customIcon:w,dropdownIndicatorCss:f?.dropdownIndicator})]})]})]}),o.jsxs(ye,{width:"auto",css:W,children:[o.jsx(s.Box,{px:"10px",borderBottomWidth:"1px",borderColor:"inherit",children:o.jsx(xe,{placeholder:D,onChange:A,inputCss:f?.input})}),o.jsx(Re,{options:x,value:C,onSelect:v=>{j(v),Y&&P(!1)},getOptionLabel:r,getOptionValue:t,isLoading:n,isFetchingNextPage:a,fetchNextPage:u,hasNextPage:l,loadingElement:S,emptyElement:L,optionCss:f?.option,scrollAreaCss:f?.scrollArea,scrollbarCss:f?.scrollbar,scrollThumbCss:f?.scrollThumb,scrollCornerCss:f?.scrollCorner,loadingMessageCss:f?.loadingMessage,emptyMessageCss:f?.emptyMessage})]})]})}const Ne=p.memo(ze),Me=p.memo(({controlCss:r,...t})=>{const n=b({"&[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 o.jsx(Ie,{asChild:!0,children:o.jsx(s.Button,{...t,css:n,children:t.children})})});g.AsyncCombobox=Ne,Object.defineProperty(g,Symbol.toStringTag,{value:"Module"})});