@rubenpazch/autocomplete 2.0.3 → 2.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs.js +5 -5
- package/dist/index.esm.js +5 -5
- package/package.json +3 -3
package/dist/index.cjs.js
CHANGED
|
@@ -424,7 +424,7 @@ function requireJsxRuntime$1 () {
|
|
|
424
424
|
|
|
425
425
|
var jsxRuntimeExports$1 = requireJsxRuntime$1();
|
|
426
426
|
|
|
427
|
-
var r,s={exports:{}},o={};var t,l
|
|
427
|
+
var r,s={exports:{}},o={};var t,n,l={};
|
|
428
428
|
/**
|
|
429
429
|
* @license React
|
|
430
430
|
* react-jsx-runtime.development.js
|
|
@@ -433,7 +433,7 @@ var r,s={exports:{}},o={};var t,l,n={};
|
|
|
433
433
|
*
|
|
434
434
|
* This source code is licensed under the MIT license found in the
|
|
435
435
|
* LICENSE file in the root directory of this source tree.
|
|
436
|
-
*/function a(){return t||(t=1,"production"!==process.env.NODE_ENV&&function(){function r(e){if(null==e)return null;if("function"==typeof e)return e.$$typeof
|
|
436
|
+
*/function a(){return t||(t=1,"production"!==process.env.NODE_ENV&&function(){function r(e){if(null==e)return null;if("function"==typeof e)return e.$$typeof===M?null:e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case u:return "Fragment";case v:return "Profiler";case p:return "StrictMode";case f:return "Suspense";case C:return "SuspenseList";case N:return "Activity"}if("object"==typeof e)switch("number"==typeof e.tag&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case x:return "Portal";case j:return e.displayName||"Context";case g:return (e._context.displayName||"Context")+".Consumer";case k:var s=e.render;return (e=e.displayName)||(e=""!==(e=s.displayName||s.name||"")?"ForwardRef("+e+")":"ForwardRef"),e;case L:return null!==(s=e.displayName||null)?s:r(e.type)||"Memo";case y:s=e._payload,e=e._init;try{return r(e(s))}catch(e){}}return null}function s(e){return ""+e}function o(e){try{s(e);var r=!1;}catch(e){r=true;}if(r){var o=(r=console).error,t="function"==typeof Symbol&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return o.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",t),s(e)}}function t(e){if(e===u)return "<>";if("object"==typeof e&&null!==e&&e.$$typeof===y)return "<...>";try{var s=r(e);return s?"<"+s+">":"<...>"}catch(e){return "<...>"}}function n(){return Error("react-stack-top-frame")}function a(){var e=r(this.type);return B[e]||(B[e]=true,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.")),void 0!==(e=this.props.ref)?e:null}function i(e,s,t,n,l,i){var h,m=s.children;if(void 0!==m)if(n)if(z(m)){for(n=0;n<m.length;n++)c(m[n]);Object.freeze&&Object.freeze(m);}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 c(m);if($.call(s,"key")){m=r(e);var x=Object.keys(s).filter(function(e){return "key"!==e});n=0<x.length?"{key: someKey, "+x.join(": ..., ")+": ...}":"{key: someKey}",_[m+n]||(x=0<x.length?"{"+x.join(": ..., ")+": ...}":"{}",console.error('A props object containing a "key" prop is being spread into JSX:\n let props = %s;\n <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n let props = %s;\n <%s key={someKey} {...props} />',n,m,x,m),_[m+n]=true);}if(m=null,void 0!==t&&(o(t),m=""+t),function(e){if($.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return false}return void 0!==e.key}(s)&&(o(s.key),m=""+s.key),"key"in s)for(var u in t={},s)"key"!==u&&(t[u]=s[u]);else t=s;return m&&function(e,r){function s(){d||(d=true,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));}s.isReactWarning=true,Object.defineProperty(e,"key",{get:s,configurable:true});}(t,"function"==typeof e?e.displayName||e.name||"Unknown":e),function(e,r,s,o,t,n){var l=s.ref;return e={$$typeof:w,type:e,key:r,props:s,_owner:o},null!==(void 0!==l?l:null)?Object.defineProperty(e,"ref",{enumerable:false,get:a}):Object.defineProperty(e,"ref",{enumerable:false,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:false,enumerable:false,writable:true,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:false,enumerable:false,writable:true,value:null}),Object.defineProperty(e,"_debugStack",{configurable:false,enumerable:false,writable:true,value:t}),Object.defineProperty(e,"_debugTask",{configurable:false,enumerable:false,writable:true,value:n}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}(e,m,t,null===(h=b.A)?null:h.getOwner(),l,i)}function c(e){h(e)?e._store&&(e._store.validated=1):"object"==typeof e&&null!==e&&e.$$typeof===y&&("fulfilled"===e._payload.status?h(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1));}function h(e){return "object"==typeof e&&null!==e&&e.$$typeof===w}var d,m=require$$0,w=Symbol.for("react.transitional.element"),x=Symbol.for("react.portal"),u=Symbol.for("react.fragment"),p=Symbol.for("react.strict_mode"),v=Symbol.for("react.profiler"),g=Symbol.for("react.consumer"),j=Symbol.for("react.context"),k=Symbol.for("react.forward_ref"),f=Symbol.for("react.suspense"),C=Symbol.for("react.suspense_list"),L=Symbol.for("react.memo"),y=Symbol.for("react.lazy"),N=Symbol.for("react.activity"),M=Symbol.for("react.client.reference"),b=m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,$=Object.prototype.hasOwnProperty,z=Array.isArray,H=console.createTask?console.createTask:function(){return null},B={},W=(m={react_stack_bottom_frame:function(e){return e()}}).react_stack_bottom_frame.bind(m,n)(),V=H(t(n)),_={};l.Fragment=u,l.jsx=function(e,r,s){var o=1e4>b.recentlyCreatedOwnerStacks++;return i(e,r,s,false,o?Error("react-stack-top-frame"):W,o?H(t(e)):V)},l.jsxs=function(e,r,s){var o=1e4>b.recentlyCreatedOwnerStacks++;return i(e,r,s,true,o?Error("react-stack-top-frame"):W,o?H(t(e)):V)};}()),l}var i=(n||(n=1,"production"===process.env.NODE_ENV?s.exports=function(){if(r)return o;r=1;var e=Symbol.for("react.transitional.element"),s=Symbol.for("react.fragment");function t(r,s,o){var t=null;if(void 0!==o&&(t=""+o),void 0!==s.key&&(t=""+s.key),"key"in s)for(var n in o={},s)"key"!==n&&(o[n]=s[n]);else o=s;return s=o.ref,{$$typeof:e,type:r,key:t,ref:void 0!==s?s:null,props:o}}return o.Fragment=s,o.jsx=t,o.jsxs=t,o}():s.exports=a()),s.exports);function p({className:e="",size:r="md"}){const s=`${{sm:"w-4 h-4",md:"w-5 h-5",lg:"w-6 h-6"}[r]} ${e}`;return i.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor",className:s,"aria-label":"Check",children:i.jsx("path",{fillRule:"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",clipRule:"evenodd"})})}const f=({className:e="",size:r="md",color:s="currentColor",direction:o="down"})=>i.jsx("svg",{className:`${{sm:"w-4 h-4",md:"w-5 h-5",lg:"w-6 h-6"}[r]} ${{up:"rotate-180",down:"",left:"rotate-90",right:"-rotate-90"}[o]} ${e}`,fill:"none",stroke:s,viewBox:"0 0 24 24",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round",children:i.jsx("path",{d:"M6 9l6 6 6-6"})});function M({className:e="",size:r="md",color:s="currentColor"}){return i.jsx("svg",{className:`${{sm:"w-4 h-4",md:"w-5 h-5",lg:"w-6 h-6"}[r]} ${e}`,fill:"none",stroke:s,viewBox:"0 0 24 24",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round",children:i.jsx("path",{d:"M6 18L18 6M6 6l12 12"})})}
|
|
437
437
|
|
|
438
438
|
var jsxRuntime = {exports: {}};
|
|
439
439
|
|
|
@@ -1106,9 +1106,9 @@ const Autocomplete = ({ label, value, onChange, options = [], placeholder = "Sea
|
|
|
1106
1106
|
${clearable && value ? "pr-20" : "pr-12"}
|
|
1107
1107
|
${getBorderColor()}
|
|
1108
1108
|
${readOnly ? "bg-gray-50 cursor-default" : ""}
|
|
1109
|
-
`, "data-testid": "autocomplete-input" }), jsxRuntimeExports$1.jsxs("div", { className: "absolute right-3 top-1/2 transform -translate-y-1/2 flex items-center gap-2", children: [loading && jsxRuntimeExports$1.jsx(LoadingSpinner, { size: "sm", variant: "dots", inline: true }), clearable && value && !loading && !disabled && (jsxRuntimeExports$1.jsx("button", { type: "button", onClick: handleClear, className: "text-gray-400 hover:text-gray-600 transition-colors", "data-testid": "autocomplete-clear", "aria-label": "Clear selection", children: jsxRuntimeExports$1.jsx(
|
|
1109
|
+
`, "data-testid": "autocomplete-input" }), jsxRuntimeExports$1.jsxs("div", { className: "absolute right-3 top-1/2 transform -translate-y-1/2 flex items-center gap-2", children: [loading && jsxRuntimeExports$1.jsx(LoadingSpinner, { size: "sm", variant: "dots", inline: true }), clearable && value && !loading && !disabled && (jsxRuntimeExports$1.jsx("button", { type: "button", onClick: handleClear, className: "text-gray-400 hover:text-gray-600 transition-colors", "data-testid": "autocomplete-clear", "aria-label": "Clear selection", children: jsxRuntimeExports$1.jsx(M, { className: "w-4 h-4" }) })), jsxRuntimeExports$1.jsx("button", { type: "button", onClick: handleToggle, className: `text-gray-400 transition-all ${disabled || readOnly
|
|
1110
1110
|
? "cursor-not-allowed opacity-50"
|
|
1111
|
-
: "hover:text-gray-600"}`, disabled: disabled, "data-testid": "autocomplete-toggle", "aria-label": isOpen ? "Close dropdown" : "Open dropdown", children: jsxRuntimeExports$1.jsx(
|
|
1111
|
+
: "hover:text-gray-600"}`, disabled: disabled, "data-testid": "autocomplete-toggle", "aria-label": isOpen ? "Close dropdown" : "Open dropdown", children: jsxRuntimeExports$1.jsx(f, { className: `w-5 h-5 transition-transform duration-200 ${isOpen ? "rotate-180" : ""}` }) })] }), isOpen && !disabled && !readOnly && (jsxRuntimeExports$1.jsxs("div", { ref: dropdownRef, className: `
|
|
1112
1112
|
absolute z-50 left-0 right-0 mt-1
|
|
1113
1113
|
bg-white border-2 border-gray-200 rounded-lg shadow-lg
|
|
1114
1114
|
overflow-hidden
|
|
@@ -1124,7 +1124,7 @@ const Autocomplete = ({ label, value, onChange, options = [], placeholder = "Sea
|
|
|
1124
1124
|
${isHighlighted && !option.disabled ? "bg-blue-50" : ""}
|
|
1125
1125
|
${isSelected && !option.disabled ? "bg-blue-100" : ""}
|
|
1126
1126
|
${!isHighlighted && !isSelected && !option.disabled ? "hover:bg-gray-50" : ""}
|
|
1127
|
-
`, "data-testid": `autocomplete-option-${option.value}`, children: renderOption ? (renderOption(option, isSelected)) : (jsxRuntimeExports$1.jsxs(jsxRuntimeExports$1.Fragment, { children: [jsxRuntimeExports$1.jsxs("div", { className: "flex-1", children: [jsxRuntimeExports$1.jsx("div", { className: "font-medium text-gray-900", children: highlightMatchText(option.label, searchTerm, highlightMatch) }), option.description && (jsxRuntimeExports$1.jsx("div", { className: "text-xs text-gray-500 mt-0.5", children: option.description }))] }), isSelected && (jsxRuntimeExports$1.jsx(
|
|
1127
|
+
`, "data-testid": `autocomplete-option-${option.value}`, children: renderOption ? (renderOption(option, isSelected)) : (jsxRuntimeExports$1.jsxs(jsxRuntimeExports$1.Fragment, { children: [jsxRuntimeExports$1.jsxs("div", { className: "flex-1", children: [jsxRuntimeExports$1.jsx("div", { className: "font-medium text-gray-900", children: highlightMatchText(option.label, searchTerm, highlightMatch) }), option.description && (jsxRuntimeExports$1.jsx("div", { className: "text-xs text-gray-500 mt-0.5", children: option.description }))] }), isSelected && (jsxRuntimeExports$1.jsx(p, { className: "w-5 h-5 text-blue-600 flex-shrink-0" }))] })) }, option.value));
|
|
1128
1128
|
}) })) }), onCreate && searchTerm && (jsxRuntimeExports$1.jsxs("div", { onClick: () => {
|
|
1129
1129
|
onCreate(searchTerm.trim());
|
|
1130
1130
|
setIsOpen(false);
|
package/dist/index.esm.js
CHANGED
|
@@ -422,7 +422,7 @@ function requireJsxRuntime$1 () {
|
|
|
422
422
|
|
|
423
423
|
var jsxRuntimeExports$1 = requireJsxRuntime$1();
|
|
424
424
|
|
|
425
|
-
var r,s={exports:{}},o={};var t,l
|
|
425
|
+
var r,s={exports:{}},o={};var t,n,l={};
|
|
426
426
|
/**
|
|
427
427
|
* @license React
|
|
428
428
|
* react-jsx-runtime.development.js
|
|
@@ -431,7 +431,7 @@ var r,s={exports:{}},o={};var t,l,n={};
|
|
|
431
431
|
*
|
|
432
432
|
* This source code is licensed under the MIT license found in the
|
|
433
433
|
* LICENSE file in the root directory of this source tree.
|
|
434
|
-
*/function a(){return t||(t=1,"production"!==process.env.NODE_ENV&&function(){function r(e){if(null==e)return null;if("function"==typeof e)return e.$$typeof
|
|
434
|
+
*/function a(){return t||(t=1,"production"!==process.env.NODE_ENV&&function(){function r(e){if(null==e)return null;if("function"==typeof e)return e.$$typeof===M?null:e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case u:return "Fragment";case v:return "Profiler";case p:return "StrictMode";case f:return "Suspense";case C:return "SuspenseList";case N:return "Activity"}if("object"==typeof e)switch("number"==typeof e.tag&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case x:return "Portal";case j:return e.displayName||"Context";case g:return (e._context.displayName||"Context")+".Consumer";case k:var s=e.render;return (e=e.displayName)||(e=""!==(e=s.displayName||s.name||"")?"ForwardRef("+e+")":"ForwardRef"),e;case L:return null!==(s=e.displayName||null)?s:r(e.type)||"Memo";case y:s=e._payload,e=e._init;try{return r(e(s))}catch(e){}}return null}function s(e){return ""+e}function o(e){try{s(e);var r=!1;}catch(e){r=true;}if(r){var o=(r=console).error,t="function"==typeof Symbol&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return o.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",t),s(e)}}function t(e){if(e===u)return "<>";if("object"==typeof e&&null!==e&&e.$$typeof===y)return "<...>";try{var s=r(e);return s?"<"+s+">":"<...>"}catch(e){return "<...>"}}function n(){return Error("react-stack-top-frame")}function a(){var e=r(this.type);return B[e]||(B[e]=true,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.")),void 0!==(e=this.props.ref)?e:null}function i(e,s,t,n,l,i){var h,m=s.children;if(void 0!==m)if(n)if(z(m)){for(n=0;n<m.length;n++)c(m[n]);Object.freeze&&Object.freeze(m);}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 c(m);if($.call(s,"key")){m=r(e);var x=Object.keys(s).filter(function(e){return "key"!==e});n=0<x.length?"{key: someKey, "+x.join(": ..., ")+": ...}":"{key: someKey}",_[m+n]||(x=0<x.length?"{"+x.join(": ..., ")+": ...}":"{}",console.error('A props object containing a "key" prop is being spread into JSX:\n let props = %s;\n <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n let props = %s;\n <%s key={someKey} {...props} />',n,m,x,m),_[m+n]=true);}if(m=null,void 0!==t&&(o(t),m=""+t),function(e){if($.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return false}return void 0!==e.key}(s)&&(o(s.key),m=""+s.key),"key"in s)for(var u in t={},s)"key"!==u&&(t[u]=s[u]);else t=s;return m&&function(e,r){function s(){d||(d=true,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));}s.isReactWarning=true,Object.defineProperty(e,"key",{get:s,configurable:true});}(t,"function"==typeof e?e.displayName||e.name||"Unknown":e),function(e,r,s,o,t,n){var l=s.ref;return e={$$typeof:w,type:e,key:r,props:s,_owner:o},null!==(void 0!==l?l:null)?Object.defineProperty(e,"ref",{enumerable:false,get:a}):Object.defineProperty(e,"ref",{enumerable:false,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:false,enumerable:false,writable:true,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:false,enumerable:false,writable:true,value:null}),Object.defineProperty(e,"_debugStack",{configurable:false,enumerable:false,writable:true,value:t}),Object.defineProperty(e,"_debugTask",{configurable:false,enumerable:false,writable:true,value:n}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}(e,m,t,null===(h=b.A)?null:h.getOwner(),l,i)}function c(e){h(e)?e._store&&(e._store.validated=1):"object"==typeof e&&null!==e&&e.$$typeof===y&&("fulfilled"===e._payload.status?h(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1));}function h(e){return "object"==typeof e&&null!==e&&e.$$typeof===w}var d,m=require$$0,w=Symbol.for("react.transitional.element"),x=Symbol.for("react.portal"),u=Symbol.for("react.fragment"),p=Symbol.for("react.strict_mode"),v=Symbol.for("react.profiler"),g=Symbol.for("react.consumer"),j=Symbol.for("react.context"),k=Symbol.for("react.forward_ref"),f=Symbol.for("react.suspense"),C=Symbol.for("react.suspense_list"),L=Symbol.for("react.memo"),y=Symbol.for("react.lazy"),N=Symbol.for("react.activity"),M=Symbol.for("react.client.reference"),b=m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,$=Object.prototype.hasOwnProperty,z=Array.isArray,H=console.createTask?console.createTask:function(){return null},B={},W=(m={react_stack_bottom_frame:function(e){return e()}}).react_stack_bottom_frame.bind(m,n)(),V=H(t(n)),_={};l.Fragment=u,l.jsx=function(e,r,s){var o=1e4>b.recentlyCreatedOwnerStacks++;return i(e,r,s,false,o?Error("react-stack-top-frame"):W,o?H(t(e)):V)},l.jsxs=function(e,r,s){var o=1e4>b.recentlyCreatedOwnerStacks++;return i(e,r,s,true,o?Error("react-stack-top-frame"):W,o?H(t(e)):V)};}()),l}var i=(n||(n=1,"production"===process.env.NODE_ENV?s.exports=function(){if(r)return o;r=1;var e=Symbol.for("react.transitional.element"),s=Symbol.for("react.fragment");function t(r,s,o){var t=null;if(void 0!==o&&(t=""+o),void 0!==s.key&&(t=""+s.key),"key"in s)for(var n in o={},s)"key"!==n&&(o[n]=s[n]);else o=s;return s=o.ref,{$$typeof:e,type:r,key:t,ref:void 0!==s?s:null,props:o}}return o.Fragment=s,o.jsx=t,o.jsxs=t,o}():s.exports=a()),s.exports);function p({className:e="",size:r="md"}){const s=`${{sm:"w-4 h-4",md:"w-5 h-5",lg:"w-6 h-6"}[r]} ${e}`;return i.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor",className:s,"aria-label":"Check",children:i.jsx("path",{fillRule:"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",clipRule:"evenodd"})})}const f=({className:e="",size:r="md",color:s="currentColor",direction:o="down"})=>i.jsx("svg",{className:`${{sm:"w-4 h-4",md:"w-5 h-5",lg:"w-6 h-6"}[r]} ${{up:"rotate-180",down:"",left:"rotate-90",right:"-rotate-90"}[o]} ${e}`,fill:"none",stroke:s,viewBox:"0 0 24 24",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round",children:i.jsx("path",{d:"M6 9l6 6 6-6"})});function M({className:e="",size:r="md",color:s="currentColor"}){return i.jsx("svg",{className:`${{sm:"w-4 h-4",md:"w-5 h-5",lg:"w-6 h-6"}[r]} ${e}`,fill:"none",stroke:s,viewBox:"0 0 24 24",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round",children:i.jsx("path",{d:"M6 18L18 6M6 6l12 12"})})}
|
|
435
435
|
|
|
436
436
|
var jsxRuntime = {exports: {}};
|
|
437
437
|
|
|
@@ -1104,9 +1104,9 @@ const Autocomplete = ({ label, value, onChange, options = [], placeholder = "Sea
|
|
|
1104
1104
|
${clearable && value ? "pr-20" : "pr-12"}
|
|
1105
1105
|
${getBorderColor()}
|
|
1106
1106
|
${readOnly ? "bg-gray-50 cursor-default" : ""}
|
|
1107
|
-
`, "data-testid": "autocomplete-input" }), jsxRuntimeExports$1.jsxs("div", { className: "absolute right-3 top-1/2 transform -translate-y-1/2 flex items-center gap-2", children: [loading && jsxRuntimeExports$1.jsx(LoadingSpinner, { size: "sm", variant: "dots", inline: true }), clearable && value && !loading && !disabled && (jsxRuntimeExports$1.jsx("button", { type: "button", onClick: handleClear, className: "text-gray-400 hover:text-gray-600 transition-colors", "data-testid": "autocomplete-clear", "aria-label": "Clear selection", children: jsxRuntimeExports$1.jsx(
|
|
1107
|
+
`, "data-testid": "autocomplete-input" }), jsxRuntimeExports$1.jsxs("div", { className: "absolute right-3 top-1/2 transform -translate-y-1/2 flex items-center gap-2", children: [loading && jsxRuntimeExports$1.jsx(LoadingSpinner, { size: "sm", variant: "dots", inline: true }), clearable && value && !loading && !disabled && (jsxRuntimeExports$1.jsx("button", { type: "button", onClick: handleClear, className: "text-gray-400 hover:text-gray-600 transition-colors", "data-testid": "autocomplete-clear", "aria-label": "Clear selection", children: jsxRuntimeExports$1.jsx(M, { className: "w-4 h-4" }) })), jsxRuntimeExports$1.jsx("button", { type: "button", onClick: handleToggle, className: `text-gray-400 transition-all ${disabled || readOnly
|
|
1108
1108
|
? "cursor-not-allowed opacity-50"
|
|
1109
|
-
: "hover:text-gray-600"}`, disabled: disabled, "data-testid": "autocomplete-toggle", "aria-label": isOpen ? "Close dropdown" : "Open dropdown", children: jsxRuntimeExports$1.jsx(
|
|
1109
|
+
: "hover:text-gray-600"}`, disabled: disabled, "data-testid": "autocomplete-toggle", "aria-label": isOpen ? "Close dropdown" : "Open dropdown", children: jsxRuntimeExports$1.jsx(f, { className: `w-5 h-5 transition-transform duration-200 ${isOpen ? "rotate-180" : ""}` }) })] }), isOpen && !disabled && !readOnly && (jsxRuntimeExports$1.jsxs("div", { ref: dropdownRef, className: `
|
|
1110
1110
|
absolute z-50 left-0 right-0 mt-1
|
|
1111
1111
|
bg-white border-2 border-gray-200 rounded-lg shadow-lg
|
|
1112
1112
|
overflow-hidden
|
|
@@ -1122,7 +1122,7 @@ const Autocomplete = ({ label, value, onChange, options = [], placeholder = "Sea
|
|
|
1122
1122
|
${isHighlighted && !option.disabled ? "bg-blue-50" : ""}
|
|
1123
1123
|
${isSelected && !option.disabled ? "bg-blue-100" : ""}
|
|
1124
1124
|
${!isHighlighted && !isSelected && !option.disabled ? "hover:bg-gray-50" : ""}
|
|
1125
|
-
`, "data-testid": `autocomplete-option-${option.value}`, children: renderOption ? (renderOption(option, isSelected)) : (jsxRuntimeExports$1.jsxs(jsxRuntimeExports$1.Fragment, { children: [jsxRuntimeExports$1.jsxs("div", { className: "flex-1", children: [jsxRuntimeExports$1.jsx("div", { className: "font-medium text-gray-900", children: highlightMatchText(option.label, searchTerm, highlightMatch) }), option.description && (jsxRuntimeExports$1.jsx("div", { className: "text-xs text-gray-500 mt-0.5", children: option.description }))] }), isSelected && (jsxRuntimeExports$1.jsx(
|
|
1125
|
+
`, "data-testid": `autocomplete-option-${option.value}`, children: renderOption ? (renderOption(option, isSelected)) : (jsxRuntimeExports$1.jsxs(jsxRuntimeExports$1.Fragment, { children: [jsxRuntimeExports$1.jsxs("div", { className: "flex-1", children: [jsxRuntimeExports$1.jsx("div", { className: "font-medium text-gray-900", children: highlightMatchText(option.label, searchTerm, highlightMatch) }), option.description && (jsxRuntimeExports$1.jsx("div", { className: "text-xs text-gray-500 mt-0.5", children: option.description }))] }), isSelected && (jsxRuntimeExports$1.jsx(p, { className: "w-5 h-5 text-blue-600 flex-shrink-0" }))] })) }, option.value));
|
|
1126
1126
|
}) })) }), onCreate && searchTerm && (jsxRuntimeExports$1.jsxs("div", { onClick: () => {
|
|
1127
1127
|
onCreate(searchTerm.trim());
|
|
1128
1128
|
setIsOpen(false);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rubenpazch/autocomplete",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.5",
|
|
4
4
|
"description": "Autocomplete component",
|
|
5
5
|
"private": false,
|
|
6
6
|
"main": "dist/index.cjs.js",
|
|
@@ -29,8 +29,8 @@
|
|
|
29
29
|
"react-dom": "^19.0.0"
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"@rubenpazch/
|
|
33
|
-
"@rubenpazch/
|
|
32
|
+
"@rubenpazch/icons": "3.0.4",
|
|
33
|
+
"@rubenpazch/loading-spinner": "2.0.0"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
36
|
"@rubenpazch/typescript-config": "3.0.0"
|