react-select-rohit10 1.0.2 → 1.0.3

package/README.md

@@ -1,16 +1,29 @@
-# React + Vite
+# React Select Component
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+An async, searchable Select component for React with support for **single select** and **multi-select** modes.
 
-Currently, two official plugins are available:
+Built with:
+- React
+- TypeScript
+- Keyboard navigation
+- Controlled & uncontrolled usage
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+---
 
-## React Compiler
+## Features
 
-The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+- Search with debounce
+- Keyboard navigation
+- Single & multi-select support
+- Controlled and uncontrolled modes
+- ustom option rendering
+- ustom selected value (chip) rendering
+- Infinite scroll support
 
-## Expanding the ESLint configuration
 
-If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
+---
+
+## Installation
+
+```bash
+npm install react-select-rohit10

package/dist/index.cjs

@@ -1,6 +1,6 @@
-"use strict";const m=require("react");var H={exports:{}},Y={};var K;function ne(){if(K)return Y;K=1;var o=Symbol.for("react.transitional.element"),h=Symbol.for("react.fragment");function E(_,c,f){var p=null;if(f!==void 0&&(p=""+f),c.key!==void 0&&(p=""+c.key),"key"in c){f={};for(var R in c)R!=="key"&&(f[R]=c[R])}else f=c;return c=f.ref,{$$typeof:o,type:_,key:p,ref:c!==void 0?c:null,props:f}}return Y.Fragment=h,Y.jsx=E,Y.jsxs=E,Y}var $={};var ee;function ae(){return ee||(ee=1,process.env.NODE_ENV!=="production"&&(function(){function o(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===U?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case u:return"Fragment";case y:return"Profiler";case k:return"StrictMode";case B:return"Suspense";case L:return"SuspenseList";case Z: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 g:return"Portal";case F:return e.displayName||"Context";case S:return(e._context.displayName||"Context")+".Consumer";case P:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case W:return r=e.displayName||null,r!==null?r:o(e.type)||"Memo";case C:r=e._payload,e=e._init;try{return o(e(r))}catch{}}return null}function h(e){return""+e}function E(e){try{h(e);var r=!1}catch{r=!0}if(r){r=console;var n=r.error,a=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return n.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",a),h(e)}}function _(e){if(e===u)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===C)return"<...>";try{var r=o(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function c(){var e=x.A;return e===null?null:e.getOwner()}function f(){return Error("react-stack-top-frame")}function p(e){if(V.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function R(e,r){function n(){M||(M=!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)",r))}n.isReactWarning=!0,Object.defineProperty(e,"key",{get:n,configurable:!0})}function i(){var e=o(this.type);return z[e]||(z[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 Q(e,r,n,a,w,D){var s=n.ref;return e={$$typeof:I,type:e,key:r,props:n,_owner:a},(s!==void 0?s:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:i}):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:w}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:D}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function O(e,r,n,a,w,D){var s=r.children;if(s!==void 0)if(a)if(q(s)){for(a=0;a<s.length;a++)N(s[a]);Object.freeze&&Object.freeze(s)}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 N(s);if(V.call(r,"key")){s=o(e);var v=Object.keys(r).filter(function(l){return l!=="key"});a=0<v.length?"{key: someKey, "+v.join(": ..., ")+": ...}":"{key: someKey}",X[s+a]||(v=0<v.length?"{"+v.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+"use strict";const m=require("react");var Q={exports:{}},I={};var ee;function ne(){if(ee)return I;ee=1;var l=Symbol.for("react.transitional.element"),h=Symbol.for("react.fragment");function E(_,c,f){var p=null;if(f!==void 0&&(p=""+f),c.key!==void 0&&(p=""+c.key),"key"in c){f={};for(var R in c)R!=="key"&&(f[R]=c[R])}else f=c;return c=f.ref,{$$typeof:l,type:_,key:p,ref:c!==void 0?c:null,props:f}}return I.Fragment=h,I.jsx=E,I.jsxs=E,I}var F={};var re;function ae(){return re||(re=1,process.env.NODE_ENV!=="production"&&(function(){function l(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===D?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case d:return"Fragment";case k:return"Profiler";case T:return"StrictMode";case Z:return"Suspense";case U:return"SuspenseList";case K: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 g:return"Portal";case W:return e.displayName||"Context";case y:return(e._context.displayName||"Context")+".Consumer";case P:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case V:return r=e.displayName||null,r!==null?r:l(e.type)||"Memo";case C:r=e._payload,e=e._init;try{return l(e(r))}catch{}}return null}function h(e){return""+e}function E(e){try{h(e);var r=!1}catch{r=!0}if(r){r=console;var n=r.error,a=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return n.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",a),h(e)}}function _(e){if(e===d)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===C)return"<...>";try{var r=l(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function c(){var e=S.A;return e===null?null:e.getOwner()}function f(){return Error("react-stack-top-frame")}function p(e){if(q.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function R(e,r){function n(){z||(z=!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)",r))}n.isReactWarning=!0,Object.defineProperty(e,"key",{get:n,configurable:!0})}function u(){var e=l(this.type);return J[e]||(J[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 B(e,r,n,a,j,Y){var s=n.ref;return e={$$typeof:L,type:e,key:r,props:n,_owner:a},(s!==void 0?s:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:u}):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:j}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:Y}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function O(e,r,n,a,j,Y){var s=r.children;if(s!==void 0)if(a)if(M(s)){for(a=0;a<s.length;a++)N(s[a]);Object.freeze&&Object.freeze(s)}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 N(s);if(q.call(r,"key")){s=l(e);var v=Object.keys(r).filter(function(o){return o!=="key"});a=0<v.length?"{key: someKey, "+v.join(": ..., ")+": ...}":"{key: someKey}",H[s+a]||(v=0<v.length?"{"+v.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} />`,a,s,v,s),X[s+a]=!0)}if(s=null,n!==void 0&&(E(n),s=""+n),p(r)&&(E(r.key),s=""+r.key),"key"in r){n={};for(var t in r)t!=="key"&&(n[t]=r[t])}else n=r;return s&&R(n,typeof e=="function"?e.displayName||e.name||"Unknown":e),Q(e,s,n,c(),w,D)}function N(e){A(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===C&&(e._payload.status==="fulfilled"?A(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function A(e){return typeof e=="object"&&e!==null&&e.$$typeof===I}var T=m,I=Symbol.for("react.transitional.element"),g=Symbol.for("react.portal"),u=Symbol.for("react.fragment"),k=Symbol.for("react.strict_mode"),y=Symbol.for("react.profiler"),S=Symbol.for("react.consumer"),F=Symbol.for("react.context"),P=Symbol.for("react.forward_ref"),B=Symbol.for("react.suspense"),L=Symbol.for("react.suspense_list"),W=Symbol.for("react.memo"),C=Symbol.for("react.lazy"),Z=Symbol.for("react.activity"),U=Symbol.for("react.client.reference"),x=T.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,V=Object.prototype.hasOwnProperty,q=Array.isArray,j=console.createTask?console.createTask:function(){return null};T={react_stack_bottom_frame:function(e){return e()}};var M,z={},J=T.react_stack_bottom_frame.bind(T,f)(),G=j(_(f)),X={};$.Fragment=u,$.jsx=function(e,r,n){var a=1e4>x.recentlyCreatedOwnerStacks++;return O(e,r,n,!1,a?Error("react-stack-top-frame"):J,a?j(_(e)):G)},$.jsxs=function(e,r,n){var a=1e4>x.recentlyCreatedOwnerStacks++;return O(e,r,n,!0,a?Error("react-stack-top-frame"):J,a?j(_(e)):G)}})()),$}var re;function se(){return re||(re=1,process.env.NODE_ENV==="production"?H.exports=ne():H.exports=ae()),H.exports}var d=se();function oe({event:o,open:h,options:E,highlightedIndex:_,setHighlightedIndex:c,onSelect:f,closeDropdown:p,userNavigatedRef:R}){if(h){if(o.key==="ArrowDown"&&(o.preventDefault(),R.current=!0,c(i=>Math.min(i+1,E.length-1))),o.key==="ArrowUp"&&(o.preventDefault(),R.current=!0,c(i=>Math.max(i-1,0))),o.key==="Enter"){o.preventDefault();const i=E[_];i&&f(i)}o.key==="Escape"&&p()}}function le({options:o=[],value:h,onChange:E,onClear:_,onSearch:c,onReachEnd:f,isLoading:p=!1,hasMoreOptions:R=!1,isMultipleAllowed:i=!0,placeholder:Q,renderOption:O,renderChipValue:N}){const A=h!==void 0,[T,I]=m.useState(i?[]:null),g=A?h:T;let u;i?Array.isArray(g)?u=g:u=[]:Array.isArray(g)?u=null:u=g??null;function k(t){A||I(t),E?.(t)}const[y,S]=m.useState(!1),[F,P]=m.useState(0),[B,L]=m.useState(""),W=m.useRef(null),C=m.useRef(null),Z=m.useRef(null),U=m.useRef(null),x=m.useRef(!1),V=m.useRef(!1),q=i?u:u?[u]:[],j=q.length>0,M=()=>S(!1),z=()=>S(t=>!t),J=t=>oe({event:t,open:y,options:o,highlightedIndex:F,setHighlightedIndex:P,onSelect:e,closeDropdown:M,userNavigatedRef:V}),G=t=>{t.stopPropagation(),k(i?[]:null),_?.()},X=t=>{const l=t.target.value;L(l),clearTimeout(U.current),U.current=setTimeout(()=>c?.(l.trim()),300)};m.useEffect(()=>{function t(l){W.current?.contains(l.target)||S(!1)}return document.addEventListener("mousedown",t),()=>document.removeEventListener("mousedown",t)},[]),m.useEffect(()=>{y||(L(""),P(0),c?.(""))},[y]);function e(t){if(!i){k(t),S(!1);return}const l=u.some(b=>b.id===t.id);k(l?u.filter(b=>b.id!==t.id):[...u,t])}function r(t){return l=>{l.stopPropagation(),k(u.filter(b=>b.id!==t.id))}}function n(t){if(!R||x.current)return;const l=t.currentTarget;l.scrollTop+l.clientHeight>=l.scrollHeight-5&&(x.current=!0,f?.())}function a({selected:t,highlighted:l}){return`select-option ${t?"selected":""} ${l?"highlighted":""}`}function w(){return j?q.map(t=>d.jsxs("span",{className:"chip",children:[N?N(t):t.label,i&&d.jsx("button",{className:"chip-remove",onClick:r(t),children:"×"})]},t.id)):d.jsx("span",{className:"placeholder",children:Q})}function D(){return o.map((t,l)=>{const b=i?u.some(te=>te.id===t.id):u?.id===t.id;return d.jsx("li",{className:a({selected:b,highlighted:l===F}),onMouseEnter:()=>P(l),onClick:()=>e(t),children:O?O(t,{selected:b}):t.label},t.id)})}function s(){return p?d.jsx("li",{className:"select-loading",children:"Loading…"}):!p&&o.length===0?d.jsx("li",{className:"select-empty",children:"No results"}):null}function v(){return y?d.jsxs(d.Fragment,{children:[d.jsx("input",{ref:C,className:"select-search",value:B,onChange:X}),d.jsxs("ul",{ref:Z,className:"select-dropdown",onScroll:n,children:[D(),s()]})]}):null}return d.jsxs("div",{ref:W,className:"select-wrapper",tabIndex:0,onKeyDown:J,children:[d.jsxs("div",{className:"select-trigger",onClick:z,children:[d.jsx("div",{className:"chips",children:w()}),j&&d.jsx("button",{className:"clear-btn",onClick:G,children:"Clear"})]}),v()]})}module.exports=le;
+  <%s key={someKey} {...props} />`,a,s,v,s),H[s+a]=!0)}if(s=null,n!==void 0&&(E(n),s=""+n),p(r)&&(E(r.key),s=""+r.key),"key"in r){n={};for(var t in r)t!=="key"&&(n[t]=r[t])}else n=r;return s&&R(n,typeof e=="function"?e.displayName||e.name||"Unknown":e),B(e,s,n,c(),j,Y)}function N(e){A(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===C&&(e._payload.status==="fulfilled"?A(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function A(e){return typeof e=="object"&&e!==null&&e.$$typeof===L}var b=m,L=Symbol.for("react.transitional.element"),g=Symbol.for("react.portal"),d=Symbol.for("react.fragment"),T=Symbol.for("react.strict_mode"),k=Symbol.for("react.profiler"),y=Symbol.for("react.consumer"),W=Symbol.for("react.context"),P=Symbol.for("react.forward_ref"),Z=Symbol.for("react.suspense"),U=Symbol.for("react.suspense_list"),V=Symbol.for("react.memo"),C=Symbol.for("react.lazy"),K=Symbol.for("react.activity"),D=Symbol.for("react.client.reference"),S=b.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,q=Object.prototype.hasOwnProperty,M=Array.isArray,x=console.createTask?console.createTask:function(){return null};b={react_stack_bottom_frame:function(e){return e()}};var z,J={},G=b.react_stack_bottom_frame.bind(b,f)(),X=x(_(f)),H={};F.Fragment=d,F.jsx=function(e,r,n){var a=1e4>S.recentlyCreatedOwnerStacks++;return O(e,r,n,!1,a?Error("react-stack-top-frame"):G,a?x(_(e)):X)},F.jsxs=function(e,r,n){var a=1e4>S.recentlyCreatedOwnerStacks++;return O(e,r,n,!0,a?Error("react-stack-top-frame"):G,a?x(_(e)):X)}})()),F}var te;function se(){return te||(te=1,process.env.NODE_ENV==="production"?Q.exports=ne():Q.exports=ae()),Q.exports}var i=se();function oe({event:l,open:h,options:E,highlightedIndex:_,setHighlightedIndex:c,onSelect:f,closeDropdown:p,userNavigatedRef:R}){if(h){if(l.key==="ArrowDown"&&(l.preventDefault(),R.current=!0,c(u=>Math.min(u+1,E.length-1))),l.key==="ArrowUp"&&(l.preventDefault(),R.current=!0,c(u=>Math.max(u-1,0))),l.key==="Enter"){l.preventDefault();const u=E[_];u&&f(u)}l.key==="Escape"&&p()}}function le({options:l,value:h,onChange:E,onClear:_,onSearch:c,onReachEnd:f,isLoading:p=!1,hasMoreOptions:R=!1,isMultipleAllowed:u=!0,placeholder:B,renderOption:O,renderChipValue:N}){const A=h!==void 0,[b,L]=m.useState(u?[]:null),g=A?h:b;let d;u?d=Array.isArray(g)?g:[]:d=Array.isArray(g)?null:g??null;function T(t){A||L(t),E?.(t)}const[k,y]=m.useState(!1),[W,P]=m.useState(0),[Z,U]=m.useState(""),V=m.useRef(null),C=m.useRef(null),K=m.useRef(null),D=m.useRef(null),S=m.useRef(!1),q=m.useRef(!1),M=u?d:d?[d]:[],x=M.length>0,z=()=>y(!1),J=()=>y(t=>!t),G=t=>oe({event:t,open:k,options:l,highlightedIndex:W,setHighlightedIndex:P,onSelect:e,closeDropdown:z,userNavigatedRef:q}),X=t=>{t.stopPropagation(),T(u?[]:null),_?.()},H=t=>{const o=t.target.value;U(o),D.current!==null&&clearTimeout(D.current),D.current=window.setTimeout(()=>{c?.(o.trim())},300)};m.useEffect(()=>{function t(o){V.current?.contains(o.target)||y(!1)}return document.addEventListener("mousedown",t),()=>document.removeEventListener("mousedown",t)},[]),m.useEffect(()=>{k||(U(""),P(0),c?.(""))},[k,c]);function e(t){if(!u){T(t),y(!1);return}const o=d,w=o.some($=>$.id===t.id);T(w?o.filter($=>$.id!==t.id):[...o,t])}function r(t){return o=>{o.stopPropagation(),T(d.filter(w=>w.id!==t.id))}}function n(t){if(!R||S.current)return;const o=t.currentTarget;o.scrollTop+o.clientHeight>=o.scrollHeight-5&&(S.current=!0,f?.())}function a({selected:t,highlighted:o}){return`select-option ${t?"selected":""} ${o?"highlighted":""}`}function j(){return x?i.jsx(i.Fragment,{children:M.map(t=>i.jsxs("span",{className:"chip",children:[N?N(t):t.label,u&&i.jsx("button",{className:"chip-remove",onClick:r(t),children:"×"})]},t.id))}):i.jsx("span",{className:"placeholder",children:B})}function Y(){return l.map((t,o)=>{const w=u?d.some($=>$.id===t.id):d?.id===t.id;return i.jsx("li",{className:a({selected:w,highlighted:o===W}),onMouseEnter:()=>P(o),onClick:()=>e(t),children:O?O(t,{selected:w}):t.label},t.id)})}function s(){return p?i.jsx("li",{className:"select-loading",children:"Loading…"}):!p&&l.length===0?i.jsx("li",{className:"select-empty",children:"No results"}):null}function v(){return k?i.jsxs(i.Fragment,{children:[i.jsx("input",{ref:C,className:"select-search",value:Z,onChange:H}),i.jsxs("ul",{ref:K,className:"select-dropdown",onScroll:n,children:[Y(),s()]})]}):null}return i.jsxs("div",{ref:V,className:"select-wrapper",tabIndex:0,onKeyDown:G,children:[i.jsxs("div",{className:"select-trigger",onClick:J,children:[i.jsx("div",{className:"chips",children:j()}),x&&i.jsx("button",{className:"clear-btn",onClick:X,children:"Clear"})]}),v()]})}module.exports=le;

package/dist/index.js

@@ -1,10 +1,10 @@
-import oe, { useState as H, useRef as w, useEffect as ee } from "react";
-var Q = { exports: {} }, Y = {};
-var re;
+import oe, { useState as Q, useRef as S, useEffect as re } from "react";
+var B = { exports: {} }, I = {};
+var te;
 function se() {
-  if (re) return Y;
-  re = 1;
-  var s = /* @__PURE__ */ Symbol.for("react.transitional.element"), h = /* @__PURE__ */ Symbol.for("react.fragment");
+  if (te) return I;
+  te = 1;
+  var l = /* @__PURE__ */ Symbol.for("react.transitional.element"), h = /* @__PURE__ */ Symbol.for("react.fragment");
   function m(_, c, f) {
     var p = null;
     if (f !== void 0 && (p = "" + f), c.key !== void 0 && (p = "" + c.key), "key" in c) {
@@ -13,57 +13,57 @@ function se() {
         E !== "key" && (f[E] = c[E]);
     } else f = c;
     return c = f.ref, {
-      $$typeof: s,
+      $$typeof: l,
       type: _,
       key: p,
       ref: c !== void 0 ? c : null,
       props: f
     };
   }
-  return Y.Fragment = h, Y.jsx = m, Y.jsxs = m, Y;
+  return I.Fragment = h, I.jsx = m, I.jsxs = m, I;
 }
-var $ = {};
-var te;
+var F = {};
+var ne;
 function le() {
-  return te || (te = 1, process.env.NODE_ENV !== "production" && (function() {
-    function s(e) {
+  return ne || (ne = 1, process.env.NODE_ENV !== "production" && (function() {
+    function l(e) {
       if (e == null) return null;
       if (typeof e == "function")
-        return e.$$typeof === U ? null : e.displayName || e.name || null;
+        return e.$$typeof === D ? null : e.displayName || e.name || null;
       if (typeof e == "string") return e;
       switch (e) {
-        case u:
+        case d:
           return "Fragment";
-        case k:
+        case T:
           return "Profiler";
         case g:
           return "StrictMode";
-        case Z:
+        case K:
           return "Suspense";
-        case L:
+        case U:
           return "SuspenseList";
-        case K:
+        case ee:
           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 T:
+          case b:
             return "Portal";
-          case F:
+          case W:
             return e.displayName || "Context";
-          case y:
+          case k:
             return (e._context.displayName || "Context") + ".Consumer";
           case P:
             var r = e.render;
             return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
-          case W:
-            return r = e.displayName || null, r !== null ? r : s(e.type) || "Memo";
+          case V:
+            return r = e.displayName || null, r !== null ? r : l(e.type) || "Memo";
           case C:
             r = e._payload, e = e._init;
             try {
-              return s(e(r));
+              return l(e(r));
             } catch {
             }
         }
@@ -90,25 +90,25 @@ function le() {
       }
     }
     function _(e) {
-      if (e === u) return "<>";
+      if (e === d) return "<>";
       if (typeof e == "object" && e !== null && e.$$typeof === C)
         return "<...>";
       try {
-        var r = s(e);
+        var r = l(e);
         return r ? "<" + r + ">" : "<...>";
       } catch {
         return "<...>";
       }
     }
     function c() {
-      var e = x.A;
+      var e = y.A;
       return e === null ? null : e.getOwner();
     }
     function f() {
       return Error("react-stack-top-frame");
     }
     function p(e) {
-      if (V.call(e, "key")) {
+      if (M.call(e, "key")) {
         var r = Object.getOwnPropertyDescriptor(e, "key").get;
         if (r && r.isReactWarning) return !1;
       }
@@ -116,7 +116,7 @@ function le() {
     }
     function E(e, r) {
       function n() {
-        q || (q = !0, console.error(
+        z || (z = !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)",
           r
         ));
@@ -126,23 +126,23 @@ function le() {
         configurable: !0
       });
     }
-    function i() {
-      var e = s(this.type);
-      return z[e] || (z[e] = !0, console.error(
+    function u() {
+      var e = l(this.type);
+      return J[e] || (J[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 B(e, r, n, a, j, D) {
+    function Z(e, r, n, a, j, Y) {
       var o = n.ref;
       return e = {
-        $$typeof: I,
+        $$typeof: L,
         type: e,
         key: r,
         props: n,
         _owner: a
       }, (o !== void 0 ? o : null) !== null ? Object.defineProperty(e, "ref", {
         enumerable: !1,
-        get: i
+        get: u
       }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
         configurable: !1,
         enumerable: !1,
@@ -162,14 +162,14 @@ function le() {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: D
+        value: Y
       }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
     }
-    function O(e, r, n, a, j, D) {
+    function O(e, r, n, a, j, Y) {
       var o = r.children;
       if (o !== void 0)
         if (a)
-          if (M(o)) {
+          if (q(o)) {
             for (a = 0; a < o.length; a++)
               N(o[a]);
             Object.freeze && Object.freeze(o);
@@ -178,12 +178,12 @@ function le() {
               "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 N(o);
-      if (V.call(r, "key")) {
-        o = s(e);
-        var R = Object.keys(r).filter(function(l) {
-          return l !== "key";
+      if (M.call(r, "key")) {
+        o = l(e);
+        var R = Object.keys(r).filter(function(s) {
+          return s !== "key";
         });
-        a = 0 < R.length ? "{key: someKey, " + R.join(": ..., ") + ": ...}" : "{key: someKey}", X[o + a] || (R = 0 < R.length ? "{" + R.join(": ..., ") + ": ...}" : "{}", console.error(
+        a = 0 < R.length ? "{key: someKey, " + R.join(": ..., ") + ": ...}" : "{key: someKey}", H[o + a] || (R = 0 < R.length ? "{" + R.join(": ..., ") + ": ...}" : "{}", console.error(
           `A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
@@ -194,7 +194,7 @@ React keys must be passed directly to JSX without using spread:
           o,
           R,
           o
-        ), X[o + a] = !0);
+        ), H[o + a] = !0);
       }
       if (o = null, n !== void 0 && (m(n), o = "" + n), p(r) && (m(r.key), o = "" + r.key), "key" in r) {
         n = {};
@@ -204,63 +204,63 @@ React keys must be passed directly to JSX without using spread:
       return o && E(
         n,
         typeof e == "function" ? e.displayName || e.name || "Unknown" : e
-      ), B(
+      ), Z(
         e,
         o,
         n,
         c(),
         j,
-        D
+        Y
       );
     }
     function N(e) {
       A(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === C && (e._payload.status === "fulfilled" ? A(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
     }
     function A(e) {
-      return typeof e == "object" && e !== null && e.$$typeof === I;
+      return typeof e == "object" && e !== null && e.$$typeof === L;
     }
-    var b = oe, I = /* @__PURE__ */ Symbol.for("react.transitional.element"), T = /* @__PURE__ */ Symbol.for("react.portal"), u = /* @__PURE__ */ Symbol.for("react.fragment"), g = /* @__PURE__ */ Symbol.for("react.strict_mode"), k = /* @__PURE__ */ Symbol.for("react.profiler"), y = /* @__PURE__ */ Symbol.for("react.consumer"), F = /* @__PURE__ */ Symbol.for("react.context"), P = /* @__PURE__ */ Symbol.for("react.forward_ref"), Z = /* @__PURE__ */ Symbol.for("react.suspense"), L = /* @__PURE__ */ Symbol.for("react.suspense_list"), W = /* @__PURE__ */ Symbol.for("react.memo"), C = /* @__PURE__ */ Symbol.for("react.lazy"), K = /* @__PURE__ */ Symbol.for("react.activity"), U = /* @__PURE__ */ Symbol.for("react.client.reference"), x = b.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, V = Object.prototype.hasOwnProperty, M = Array.isArray, S = console.createTask ? console.createTask : function() {
+    var v = oe, L = /* @__PURE__ */ Symbol.for("react.transitional.element"), b = /* @__PURE__ */ Symbol.for("react.portal"), d = /* @__PURE__ */ Symbol.for("react.fragment"), g = /* @__PURE__ */ Symbol.for("react.strict_mode"), T = /* @__PURE__ */ Symbol.for("react.profiler"), k = /* @__PURE__ */ Symbol.for("react.consumer"), W = /* @__PURE__ */ Symbol.for("react.context"), P = /* @__PURE__ */ Symbol.for("react.forward_ref"), K = /* @__PURE__ */ Symbol.for("react.suspense"), U = /* @__PURE__ */ Symbol.for("react.suspense_list"), V = /* @__PURE__ */ Symbol.for("react.memo"), C = /* @__PURE__ */ Symbol.for("react.lazy"), ee = /* @__PURE__ */ Symbol.for("react.activity"), D = /* @__PURE__ */ Symbol.for("react.client.reference"), y = v.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, M = Object.prototype.hasOwnProperty, q = Array.isArray, x = console.createTask ? console.createTask : function() {
       return null;
     };
-    b = {
+    v = {
       react_stack_bottom_frame: function(e) {
         return e();
       }
     };
-    var q, z = {}, J = b.react_stack_bottom_frame.bind(
-      b,
+    var z, J = {}, G = v.react_stack_bottom_frame.bind(
+      v,
       f
-    )(), G = S(_(f)), X = {};
-    $.Fragment = u, $.jsx = function(e, r, n) {
-      var a = 1e4 > x.recentlyCreatedOwnerStacks++;
+    )(), X = x(_(f)), H = {};
+    F.Fragment = d, F.jsx = function(e, r, n) {
+      var a = 1e4 > y.recentlyCreatedOwnerStacks++;
       return O(
         e,
         r,
         n,
         !1,
-        a ? Error("react-stack-top-frame") : J,
-        a ? S(_(e)) : G
+        a ? Error("react-stack-top-frame") : G,
+        a ? x(_(e)) : X
       );
-    }, $.jsxs = function(e, r, n) {
-      var a = 1e4 > x.recentlyCreatedOwnerStacks++;
+    }, F.jsxs = function(e, r, n) {
+      var a = 1e4 > y.recentlyCreatedOwnerStacks++;
       return O(
         e,
         r,
         n,
         !0,
-        a ? Error("react-stack-top-frame") : J,
-        a ? S(_(e)) : G
+        a ? Error("react-stack-top-frame") : G,
+        a ? x(_(e)) : X
       );
     };
-  })()), $;
+  })()), F;
 }
-var ne;
+var ae;
 function ce() {
-  return ne || (ne = 1, process.env.NODE_ENV === "production" ? Q.exports = se() : Q.exports = le()), Q.exports;
+  return ae || (ae = 1, process.env.NODE_ENV === "production" ? B.exports = se() : B.exports = le()), B.exports;
 }
-var d = ce();
+var i = ce();
 function ue({
-  event: s,
+  event: l,
   open: h,
   options: m,
   highlightedIndex: _,
@@ -270,20 +270,20 @@ function ue({
   userNavigatedRef: E
 }) {
   if (h) {
-    if (s.key === "ArrowDown" && (s.preventDefault(), E.current = !0, c(
-      (i) => Math.min(i + 1, m.length - 1)
-    )), s.key === "ArrowUp" && (s.preventDefault(), E.current = !0, c(
-      (i) => Math.max(i - 1, 0)
-    )), s.key === "Enter") {
-      s.preventDefault();
-      const i = m[_];
-      i && f(i);
+    if (l.key === "ArrowDown" && (l.preventDefault(), E.current = !0, c(
+      (u) => Math.min(u + 1, m.length - 1)
+    )), l.key === "ArrowUp" && (l.preventDefault(), E.current = !0, c(
+      (u) => Math.max(u - 1, 0)
+    )), l.key === "Enter") {
+      l.preventDefault();
+      const u = m[_];
+      u && f(u);
     }
-    s.key === "Escape" && p();
+    l.key === "Escape" && p();
   }
 }
 function fe({
-  options: s = [],
+  options: l,
   value: h,
   onChange: m,
   onClear: _,
@@ -291,157 +291,173 @@ function fe({
   onReachEnd: f,
   isLoading: p = !1,
   hasMoreOptions: E = !1,
-  isMultipleAllowed: i = !0,
-  placeholder: B,
+  isMultipleAllowed: u = !0,
+  placeholder: Z,
   renderOption: O,
   renderChipValue: N
 }) {
-  const A = h !== void 0, [b, I] = H(
-    i ? [] : null
-  ), T = A ? h : b;
-  let u;
-  i ? Array.isArray(T) ? u = T : u = [] : Array.isArray(T) ? u = null : u = T ?? null;
+  const A = h !== void 0, [v, L] = Q(u ? [] : null), b = A ? h : v;
+  let d;
+  u ? d = Array.isArray(b) ? b : [] : d = Array.isArray(b) ? null : b ?? null;
   function g(t) {
-    A || I(t), m?.(t);
+    A || L(t), m?.(t);
   }
-  const [k, y] = H(!1), [F, P] = H(0), [Z, L] = H(""), W = w(null), C = w(null), K = w(null), U = w(null), x = w(!1), V = w(!1), M = i ? u : u ? [u] : [], S = M.length > 0, q = () => y(!1), z = () => y((t) => !t), J = (t) => ue({
+  const [T, k] = Q(!1), [W, P] = Q(0), [K, U] = Q(""), V = S(null), C = S(null), ee = S(null), D = S(null), y = S(!1), M = S(!1), q = u ? d : d ? [d] : [], x = q.length > 0, z = () => k(!1), J = () => k((t) => !t), G = (t) => ue({
     event: t,
-    open: k,
-    options: s,
-    highlightedIndex: F,
+    open: T,
+    options: l,
+    highlightedIndex: W,
     setHighlightedIndex: P,
     onSelect: e,
-    closeDropdown: q,
-    userNavigatedRef: V
-  }), G = (t) => {
-    t.stopPropagation(), g(i ? [] : null), _?.();
-  }, X = (t) => {
-    const l = t.target.value;
-    L(l), clearTimeout(U.current), U.current = setTimeout(
-      () => c?.(l.trim()),
-      300
-    );
+    closeDropdown: z,
+    userNavigatedRef: M
+  }), X = (t) => {
+    t.stopPropagation(), g(u ? [] : null), _?.();
+  }, H = (t) => {
+    const s = t.target.value;
+    U(s), D.current !== null && clearTimeout(D.current), D.current = window.setTimeout(() => {
+      c?.(s.trim());
+    }, 300);
   };
-  ee(() => {
-    function t(l) {
-      W.current?.contains(l.target) || y(!1);
+  re(() => {
+    function t(s) {
+      V.current?.contains(
+        s.target
+      ) || k(!1);
     }
-    return document.addEventListener("mousedown", t), () => document.removeEventListener("mousedown", t);
-  }, []), ee(() => {
-    k || (L(""), P(0), c?.(""));
-  }, [k]);
+    return document.addEventListener(
+      "mousedown",
+      t
+    ), () => document.removeEventListener(
+      "mousedown",
+      t
+    );
+  }, []), re(() => {
+    T || (U(""), P(0), c?.(""));
+  }, [T, c]);
   function e(t) {
-    if (!i) {
-      g(t), y(!1);
+    if (!u) {
+      g(t), k(!1);
       return;
     }
-    const l = u.some(
-      (v) => v.id === t.id
+    const s = d, w = s.some(
+      ($) => $.id === t.id
     );
     g(
-      l ? u.filter(
-        (v) => v.id !== t.id
-      ) : [...u, t]
+      w ? s.filter(
+        ($) => $.id !== t.id
+      ) : [...s, t]
     );
   }
   function r(t) {
-    return (l) => {
-      l.stopPropagation(), g(
-        u.filter(
-          (v) => v.id !== t.id
+    return (s) => {
+      s.stopPropagation(), g(
+        d.filter(
+          (w) => w.id !== t.id
         )
       );
     };
   }
   function n(t) {
-    if (!E || x.current) return;
-    const l = t.currentTarget;
-    l.scrollTop + l.clientHeight >= l.scrollHeight - 5 && (x.current = !0, f?.());
+    if (!E || y.current)
+      return;
+    const s = t.currentTarget;
+    s.scrollTop + s.clientHeight >= s.scrollHeight - 5 && (y.current = !0, f?.());
   }
-  function a({ selected: t, highlighted: l }) {
-    return `select-option ${t ? "selected" : ""} ${l ? "highlighted" : ""}`;
+  function a({
+    selected: t,
+    highlighted: s
+  }) {
+    return `select-option ${t ? "selected" : ""} ${s ? "highlighted" : ""}`;
   }
   function j() {
-    return S ? M.map((t) => /* @__PURE__ */ d.jsxs("span", { className: "chip", children: [
-      N ? N(t) : t.label,
-      i && /* @__PURE__ */ d.jsx(
-        "button",
-        {
-          className: "chip-remove",
-          onClick: r(t),
-          children: "×"
-        }
-      )
-    ] }, t.id)) : /* @__PURE__ */ d.jsx("span", { className: "placeholder", children: B });
+    return x ? /* @__PURE__ */ i.jsx(i.Fragment, { children: q.map((t) => /* @__PURE__ */ i.jsxs(
+      "span",
+      {
+        className: "chip",
+        children: [
+          N ? N(t) : t.label,
+          u && /* @__PURE__ */ i.jsx(
+            "button",
+            {
+              className: "chip-remove",
+              onClick: r(t),
+              children: "×"
+            }
+          )
+        ]
+      },
+      t.id
+    )) }) : /* @__PURE__ */ i.jsx("span", { className: "placeholder", children: Z });
   }
-  function D() {
-    return s.map((t, l) => {
-      const v = i ? u.some(
-        (ae) => ae.id === t.id
-      ) : u?.id === t.id;
-      return /* @__PURE__ */ d.jsx(
+  function Y() {
+    return l.map((t, s) => {
+      const w = u ? d.some(
+        ($) => $.id === t.id
+      ) : d?.id === t.id;
+      return /* @__PURE__ */ i.jsx(
         "li",
         {
           className: a({
-            selected: v,
-            highlighted: l === F
+            selected: w,
+            highlighted: s === W
           }),
-          onMouseEnter: () => P(l),
+          onMouseEnter: () => P(s),
           onClick: () => e(t),
-          children: O ? O(t, { selected: v }) : t.label
+          children: O ? O(t, { selected: w }) : t.label
         },
         t.id
       );
     });
   }
   function o() {
-    return p ? /* @__PURE__ */ d.jsx("li", { className: "select-loading", children: "Loading…" }) : !p && s.length === 0 ? /* @__PURE__ */ d.jsx("li", { className: "select-empty", children: "No results" }) : null;
+    return p ? /* @__PURE__ */ i.jsx("li", { className: "select-loading", children: "Loading…" }) : !p && l.length === 0 ? /* @__PURE__ */ i.jsx("li", { className: "select-empty", children: "No results" }) : null;
   }
   function R() {
-    return k ? /* @__PURE__ */ d.jsxs(d.Fragment, { children: [
-      /* @__PURE__ */ d.jsx(
+    return T ? /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
+      /* @__PURE__ */ i.jsx(
         "input",
         {
           ref: C,
           className: "select-search",
-          value: Z,
-          onChange: X
+          value: K,
+          onChange: H
         }
       ),
-      /* @__PURE__ */ d.jsxs(
+      /* @__PURE__ */ i.jsxs(
         "ul",
         {
-          ref: K,
+          ref: ee,
           className: "select-dropdown",
           onScroll: n,
           children: [
-            D(),
+            Y(),
             o()
           ]
         }
       )
     ] }) : null;
   }
-  return /* @__PURE__ */ d.jsxs(
+  return /* @__PURE__ */ i.jsxs(
     "div",
     {
-      ref: W,
+      ref: V,
       className: "select-wrapper",
       tabIndex: 0,
-      onKeyDown: J,
+      onKeyDown: G,
       children: [
-        /* @__PURE__ */ d.jsxs(
+        /* @__PURE__ */ i.jsxs(
           "div",
           {
             className: "select-trigger",
-            onClick: z,
+            onClick: J,
             children: [
-              /* @__PURE__ */ d.jsx("div", { className: "chips", children: j() }),
-              S && /* @__PURE__ */ d.jsx(
+              /* @__PURE__ */ i.jsx("div", { className: "chips", children: j() }),
+              x && /* @__PURE__ */ i.jsx(
                 "button",
                 {
                   className: "clear-btn",
-                  onClick: G,
+                  onClick: X,
                   children: "Clear"
                 }
               )

package/package.json

@@ -1,18 +1,25 @@
 {
   "name": "react-select-rohit10",
-  "version": "1.0.2",
-  "license": "MIT",
-  "type": "module",
+  "version": "1.0.3",
   "description": "Async searchable select component with single and multi-select support",
+  "license": "MIT",
   "keywords": [
     "react",
     "select",
     "async",
     "multiselect"
   ],
-  "main": "dist/index.cjs",
-  "module": "dist/index.js",
-  "types": "types/index.d.ts",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "types": "./types/index.d.ts"
+    }
+  },
   "files": [
     "dist",
     "types"
@@ -34,6 +41,8 @@
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.24",
     "globals": "^16.5.0",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.9.3",
     "vite": "^7.2.4"
   }
 }

package/types/index.d.ts

@@ -1,77 +1,41 @@
 import * as React from "react";
 
-
 export interface SelectOption {
   id: string | number;
   label: string;
-  [key: string]: any;
 }
 
 export interface RenderOptionMeta {
   selected: boolean;
 }
 
-export interface SelectProps<
-  T extends SelectOption = SelectOption
-> {
-  /** List of available options */
-  options: T[];
-
-  /**
-   * Controlled value
-   * - single: T | null
-   * - multiple: T[]
-   */
-  value?: T | T[] | null;
+export interface SelectProps {
+  options: SelectOption[];
 
-  /**
-   * Fired on selection change
-   * Matches single / multiple mode automatically
-   */
-  onChange?: (value: T | T[] | null) => void;
+  value?: SelectOption | SelectOption[] | null;
+  onChange?: (
+    value: SelectOption | SelectOption[] | null
+  ) => void;
 
-  /** Clear selection callback */
   onClear?: () => void;
-
-  /** Search callback (debounced internally) */
   onSearch?: (query: string) => void;
-
-  /** Triggered when dropdown scroll reaches end */
   onReachEnd?: () => void;
 
-  /** Loading state */
   isLoading?: boolean;
-
-  /** Whether more options are available */
   hasMoreOptions?: boolean;
-
-  /** Enable multi-select mode */
   isMultipleAllowed?: boolean;
 
-  /** Placeholder text */
   placeholder?: string;
 
-  /**
-   * Custom option renderer
-   */
   renderOption?: (
-    option: T,
+    option: SelectOption,
     meta: RenderOptionMeta
   ) => React.ReactNode;
 
-  /**
-   * Custom selected value renderer (chips)
-   */
-  renderChipValue?: (option: T) => React.ReactNode;
+  renderChipValue?: (
+    option: SelectOption
+  ) => React.ReactNode;
 }
 
-/**
- * Select component
- */
-declare const Select: <
-  T extends SelectOption = SelectOption
->(
-  props: SelectProps<T>
-) => React.ReactElement;
-
+declare const Select: React.FC<SelectProps>;
 export default Select;