@rubenpazch/autocomplete 3.0.0 → 3.0.2
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 +23 -4
- package/dist/index.esm.js +8 -7
- package/package.json +2 -2
package/dist/index.cjs.js
CHANGED
|
@@ -2,6 +2,25 @@
|
|
|
2
2
|
|
|
3
3
|
var require$$0 = require('react');
|
|
4
4
|
|
|
5
|
+
function _interopNamespaceDefault(e) {
|
|
6
|
+
var n = Object.create(null);
|
|
7
|
+
if (e) {
|
|
8
|
+
Object.keys(e).forEach(function (k) {
|
|
9
|
+
if (k !== 'default') {
|
|
10
|
+
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
11
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
12
|
+
enumerable: true,
|
|
13
|
+
get: function () { return e[k]; }
|
|
14
|
+
});
|
|
15
|
+
}
|
|
16
|
+
});
|
|
17
|
+
}
|
|
18
|
+
n.default = e;
|
|
19
|
+
return Object.freeze(n);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
var require$$0__namespace = /*#__PURE__*/_interopNamespaceDefault(require$$0);
|
|
23
|
+
|
|
5
24
|
var jsxRuntime$1 = {exports: {}};
|
|
6
25
|
|
|
7
26
|
var reactJsxRuntime_production$1 = {};
|
|
@@ -424,7 +443,7 @@ function requireJsxRuntime$1 () {
|
|
|
424
443
|
|
|
425
444
|
var jsxRuntimeExports$1 = requireJsxRuntime$1();
|
|
426
445
|
|
|
427
|
-
var
|
|
446
|
+
var s,o={exports:{}},t={};var n,l,a={};
|
|
428
447
|
/**
|
|
429
448
|
* @license React
|
|
430
449
|
* react-jsx-runtime.development.js
|
|
@@ -433,7 +452,7 @@ var r,s={exports:{}},o={};var t,n,l={};
|
|
|
433
452
|
*
|
|
434
453
|
* This source code is licensed under the MIT license found in the
|
|
435
454
|
* LICENSE file in the root directory of this source tree.
|
|
436
|
-
*/function
|
|
455
|
+
*/function i(){return n||(n=1,"production"!==process.env.NODE_ENV&&function(){function e(r){if(null==r)return null;if("function"==typeof r)return r.$$typeof===M?null:r.displayName||r.name||null;if("string"==typeof r)return r;switch(r){case x:return "Fragment";case v:return "Profiler";case p:return "StrictMode";case k:return "Suspense";case C:return "SuspenseList";case N:return "Activity"}if("object"==typeof r)switch("number"==typeof r.tag&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),r.$$typeof){case u:return "Portal";case j:return r.displayName||"Context";case g:return (r._context.displayName||"Context")+".Consumer";case f:var s=r.render;return (r=r.displayName)||(r=""!==(r=s.displayName||s.name||"")?"ForwardRef("+r+")":"ForwardRef"),r;case y:return null!==(s=r.displayName||null)?s:e(r.type)||"Memo";case L:s=r._payload,r=r._init;try{return e(r(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(r){if(r===x)return "<>";if("object"==typeof r&&null!==r&&r.$$typeof===L)return "<...>";try{var s=e(r);return s?"<"+s+">":"<...>"}catch(e){return "<...>"}}function n(){return Error("react-stack-top-frame")}function l(){var r=e(this.type);return B[r]||(B[r]=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!==(r=this.props.ref)?r:null}function i(r,s,t,n,a,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=e(r);var u=Object.keys(s).filter(function(e){return "key"!==e});n=0<u.length?"{key: someKey, "+u.join(": ..., ")+": ...}":"{key: someKey}",_[m+n]||(u=0<u.length?"{"+u.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,u,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 x in t={},s)"key"!==x&&(t[x]=s[x]);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 r?r.displayName||r.name||"Unknown":r),function(e,r,s,o,t,n){var a=s.ref;return e={$$typeof:w,type:e,key:r,props:s,_owner:o},null!==(void 0!==a?a:null)?Object.defineProperty(e,"ref",{enumerable:false,get:l}):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}(r,m,t,null===(h=b.A)?null:h.getOwner(),a,i)}function c(e){h(e)?e._store&&(e._store.validated=1):"object"==typeof e&&null!==e&&e.$$typeof===L&&("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"),u=Symbol.for("react.portal"),x=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"),f=Symbol.for("react.forward_ref"),k=Symbol.for("react.suspense"),C=Symbol.for("react.suspense_list"),y=Symbol.for("react.memo"),L=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)),_={};a.Fragment=x,a.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)},a.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)};}()),a}var c=(l||(l=1,"production"===process.env.NODE_ENV?o.exports=function(){if(s)return t;s=1;var e=Symbol.for("react.transitional.element"),r=Symbol.for("react.fragment");function o(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 t.Fragment=r,t.jsx=o,t.jsxs=o,t}():o.exports=i()),o.exports);function v({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 c.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor",className:s,"aria-label":"Check",children:c.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 L=({className:e="",size:r="md",color:s="currentColor",direction:o="down"})=>c.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:c.jsx("path",{d:"M6 9l6 6 6-6"})});function z({className:e="",size:r="md",color:s="currentColor"}){return c.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:c.jsx("path",{d:"M6 18L18 6M6 6l12 12"})})}const Ae={outlined:"material-symbols-outlined",rounded:"material-symbols-rounded",sharp:"material-symbols-sharp"},Ee=require$$0__namespace.forwardRef(({name:e,variant:r="outlined",size:s="md",fill:o=0,weight:t=400,grade:n=0,opticalSize:l=24,style:a,className:i,...h},d)=>{const m=(e=>"number"==typeof e?e:"sm"===e?16:"md"===e?20:24)(s),w=`"FILL" ${o}, "wght" ${t}, "GRAD" ${n}, "opsz" ${l}`;return c.jsx("span",{ref:d,"aria-hidden":"true",className:Ae[r]+(i?` ${i}`:""),style:{fontVariationSettings:w,fontSize:m,lineHeight:1,display:"inline-flex",alignItems:"center",justifyContent:"center",verticalAlign:"middle",...a},...h,children:e})});Ee.displayName="MaterialIcon";
|
|
437
456
|
|
|
438
457
|
var jsxRuntime = {exports: {}};
|
|
439
458
|
|
|
@@ -1127,12 +1146,12 @@ const Autocomplete = ({ label, value, onChange, options = [], placeholder = "Sea
|
|
|
1127
1146
|
const getInputClassName = () => {
|
|
1128
1147
|
return classNames(styles.input, icon ? styles.inputWithIcon : undefined, clearable && value ? styles.inputWithClear : styles.inputWithoutClear, readOnly ? styles.inputReadOnly : undefined, error ? styles.inputError : undefined, warning && !error ? styles.inputWarning : undefined, isFocused && !error && !warning ? styles.inputFocused : undefined);
|
|
1129
1148
|
};
|
|
1130
|
-
return (jsxRuntimeExports$1.jsxs("div", { className: classNames(styles.container, className), children: [label && (jsxRuntimeExports$1.jsxs("label", { className: styles.label, children: [label, required && jsxRuntimeExports$1.jsx("span", { className: styles.required, children: "*" })] })), jsxRuntimeExports$1.jsxs("div", { ref: containerRef, className: styles.inputWrapper, children: [icon && jsxRuntimeExports$1.jsx("div", { className: styles.iconLeft, children: icon }), jsxRuntimeExports$1.jsx("input", { ref: inputRef, type: "text", value: displayValue, onChange: handleInputChange, onFocus: handleInputFocus, onBlur: handleInputBlur, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: disabled, readOnly: readOnly || !searchable, className: getInputClassName(), "data-testid": "autocomplete-input", "data-has-error": error ? "true" : "false", "data-has-warning": warning ? "true" : "false", "data-is-focused": isFocused ? "true" : "false" }), jsxRuntimeExports$1.jsxs("div", { className: styles.rightIcons, 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: styles.clearButton, "data-testid": "autocomplete-clear", "aria-label": "Clear selection", children: jsxRuntimeExports$1.jsx(
|
|
1149
|
+
return (jsxRuntimeExports$1.jsxs("div", { className: classNames(styles.container, className), children: [label && (jsxRuntimeExports$1.jsxs("label", { className: styles.label, children: [label, required && jsxRuntimeExports$1.jsx("span", { className: styles.required, children: "*" })] })), jsxRuntimeExports$1.jsxs("div", { ref: containerRef, className: styles.inputWrapper, children: [icon && jsxRuntimeExports$1.jsx("div", { className: styles.iconLeft, children: icon }), jsxRuntimeExports$1.jsx("input", { ref: inputRef, type: "text", value: displayValue, onChange: handleInputChange, onFocus: handleInputFocus, onBlur: handleInputBlur, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: disabled, readOnly: readOnly || !searchable, className: getInputClassName(), "data-testid": "autocomplete-input", "data-has-error": error ? "true" : "false", "data-has-warning": warning ? "true" : "false", "data-is-focused": isFocused ? "true" : "false" }), jsxRuntimeExports$1.jsxs("div", { className: styles.rightIcons, 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: styles.clearButton, "data-testid": "autocomplete-clear", "aria-label": "Clear selection", children: jsxRuntimeExports$1.jsx(z, { className: "w-4 h-4" }) })), jsxRuntimeExports$1.jsx("button", { type: "button", onClick: handleToggle, className: styles.toggleButton, disabled: disabled, "data-testid": "autocomplete-toggle", "aria-label": isOpen ? "Close dropdown" : "Open dropdown", children: jsxRuntimeExports$1.jsx(L, { className: classNames(styles.toggleIcon, isOpen && styles.toggleIconOpen) }) })] }), isOpen && !disabled && !readOnly && (jsxRuntimeExports$1.jsxs("div", { ref: dropdownRef, className: classNames(styles.dropdown, position === "top" && styles.dropdownTop), style: { maxHeight }, "data-testid": "autocomplete-dropdown", children: [loading && filteredOptions.length === 0 && (jsxRuntimeExports$1.jsxs("div", { className: styles.loadingState, children: [jsxRuntimeExports$1.jsx(LoadingSpinner, { size: "sm", variant: "spinner", className: styles.loadingSpinner }), jsxRuntimeExports$1.jsx("span", { className: styles.loadingText, children: loadingText })] })), jsxRuntimeExports$1.jsx("div", { className: styles.dropdownContent, children: !loading && filteredOptions.length > 0 && (jsxRuntimeExports$1.jsx(jsxRuntimeExports$1.Fragment, { children: filteredOptions.map((option, index) => {
|
|
1131
1150
|
const isSelected = option.value === value;
|
|
1132
1151
|
const isHighlighted = index === highlightedIndex;
|
|
1133
1152
|
return (jsxRuntimeExports$1.jsx("div", { ref: (el) => {
|
|
1134
1153
|
optionRefs.current[index] = el;
|
|
1135
|
-
}, onClick: () => handleSelect(option), onMouseEnter: () => setHighlightedIndex(index), className: classNames(styles.option, option.disabled && styles.optionDisabled, isHighlighted && styles.optionHighlighted, isSelected && styles.optionSelected), "data-testid": `autocomplete-option-${option.value}`, "data-disabled": option.disabled ? "true" : "false", "data-selected": isSelected ? "true" : "false", "data-highlighted": isHighlighted ? "true" : "false", children: renderOption ? (renderOption(option, isSelected)) : (jsxRuntimeExports$1.jsxs(jsxRuntimeExports$1.Fragment, { children: [jsxRuntimeExports$1.jsxs("div", { className: styles.optionContent, children: [jsxRuntimeExports$1.jsx("div", { className: styles.optionLabel, children: highlightMatchText(option.label, searchTerm, highlightMatch) }), option.description && (jsxRuntimeExports$1.jsx("div", { className: styles.optionDescription, children: option.description }))] }), isSelected && (jsxRuntimeExports$1.jsx(
|
|
1154
|
+
}, onClick: () => handleSelect(option), onMouseEnter: () => setHighlightedIndex(index), className: classNames(styles.option, option.disabled && styles.optionDisabled, isHighlighted && styles.optionHighlighted, isSelected && styles.optionSelected), "data-testid": `autocomplete-option-${option.value}`, "data-disabled": option.disabled ? "true" : "false", "data-selected": isSelected ? "true" : "false", "data-highlighted": isHighlighted ? "true" : "false", children: renderOption ? (renderOption(option, isSelected)) : (jsxRuntimeExports$1.jsxs(jsxRuntimeExports$1.Fragment, { children: [jsxRuntimeExports$1.jsxs("div", { className: styles.optionContent, children: [jsxRuntimeExports$1.jsx("div", { className: styles.optionLabel, children: highlightMatchText(option.label, searchTerm, highlightMatch) }), option.description && (jsxRuntimeExports$1.jsx("div", { className: styles.optionDescription, children: option.description }))] }), isSelected && (jsxRuntimeExports$1.jsx(v, { className: styles.optionCheckIcon }))] })) }, option.value));
|
|
1136
1155
|
}) })) }), onCreate && searchTerm && (jsxRuntimeExports$1.jsxs("div", { onClick: () => {
|
|
1137
1156
|
onCreate(searchTerm.trim());
|
|
1138
1157
|
setIsOpen(false);
|
package/dist/index.esm.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import require$$0
|
|
1
|
+
import * as require$$0 from 'react';
|
|
2
|
+
import require$$0__default, { useState, useRef, useMemo, useEffect } from 'react';
|
|
2
3
|
|
|
3
4
|
var jsxRuntime$1 = {exports: {}};
|
|
4
5
|
|
|
@@ -336,7 +337,7 @@ function requireReactJsxRuntime_development$1 () {
|
|
|
336
337
|
object.$$typeof === REACT_ELEMENT_TYPE
|
|
337
338
|
);
|
|
338
339
|
}
|
|
339
|
-
var React = require$$
|
|
340
|
+
var React = require$$0__default,
|
|
340
341
|
REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"),
|
|
341
342
|
REACT_PORTAL_TYPE = Symbol.for("react.portal"),
|
|
342
343
|
REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"),
|
|
@@ -422,7 +423,7 @@ function requireJsxRuntime$1 () {
|
|
|
422
423
|
|
|
423
424
|
var jsxRuntimeExports$1 = requireJsxRuntime$1();
|
|
424
425
|
|
|
425
|
-
var
|
|
426
|
+
var s,o={exports:{}},t={};var n,l,a={};
|
|
426
427
|
/**
|
|
427
428
|
* @license React
|
|
428
429
|
* react-jsx-runtime.development.js
|
|
@@ -431,7 +432,7 @@ var r,s={exports:{}},o={};var t,n,l={};
|
|
|
431
432
|
*
|
|
432
433
|
* This source code is licensed under the MIT license found in the
|
|
433
434
|
* LICENSE file in the root directory of this source tree.
|
|
434
|
-
*/function
|
|
435
|
+
*/function i(){return n||(n=1,"production"!==process.env.NODE_ENV&&function(){function e(r){if(null==r)return null;if("function"==typeof r)return r.$$typeof===M?null:r.displayName||r.name||null;if("string"==typeof r)return r;switch(r){case x:return "Fragment";case v:return "Profiler";case p:return "StrictMode";case k:return "Suspense";case C:return "SuspenseList";case N:return "Activity"}if("object"==typeof r)switch("number"==typeof r.tag&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),r.$$typeof){case u:return "Portal";case j:return r.displayName||"Context";case g:return (r._context.displayName||"Context")+".Consumer";case f:var s=r.render;return (r=r.displayName)||(r=""!==(r=s.displayName||s.name||"")?"ForwardRef("+r+")":"ForwardRef"),r;case y:return null!==(s=r.displayName||null)?s:e(r.type)||"Memo";case L:s=r._payload,r=r._init;try{return e(r(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(r){if(r===x)return "<>";if("object"==typeof r&&null!==r&&r.$$typeof===L)return "<...>";try{var s=e(r);return s?"<"+s+">":"<...>"}catch(e){return "<...>"}}function n(){return Error("react-stack-top-frame")}function l(){var r=e(this.type);return B[r]||(B[r]=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!==(r=this.props.ref)?r:null}function i(r,s,t,n,a,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=e(r);var u=Object.keys(s).filter(function(e){return "key"!==e});n=0<u.length?"{key: someKey, "+u.join(": ..., ")+": ...}":"{key: someKey}",_[m+n]||(u=0<u.length?"{"+u.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,u,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 x in t={},s)"key"!==x&&(t[x]=s[x]);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 r?r.displayName||r.name||"Unknown":r),function(e,r,s,o,t,n){var a=s.ref;return e={$$typeof:w,type:e,key:r,props:s,_owner:o},null!==(void 0!==a?a:null)?Object.defineProperty(e,"ref",{enumerable:false,get:l}):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}(r,m,t,null===(h=b.A)?null:h.getOwner(),a,i)}function c(e){h(e)?e._store&&(e._store.validated=1):"object"==typeof e&&null!==e&&e.$$typeof===L&&("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__default,w=Symbol.for("react.transitional.element"),u=Symbol.for("react.portal"),x=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"),f=Symbol.for("react.forward_ref"),k=Symbol.for("react.suspense"),C=Symbol.for("react.suspense_list"),y=Symbol.for("react.memo"),L=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)),_={};a.Fragment=x,a.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)},a.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)};}()),a}var c=(l||(l=1,"production"===process.env.NODE_ENV?o.exports=function(){if(s)return t;s=1;var e=Symbol.for("react.transitional.element"),r=Symbol.for("react.fragment");function o(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 t.Fragment=r,t.jsx=o,t.jsxs=o,t}():o.exports=i()),o.exports);function v({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 c.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor",className:s,"aria-label":"Check",children:c.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 L=({className:e="",size:r="md",color:s="currentColor",direction:o="down"})=>c.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:c.jsx("path",{d:"M6 9l6 6 6-6"})});function z({className:e="",size:r="md",color:s="currentColor"}){return c.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:c.jsx("path",{d:"M6 18L18 6M6 6l12 12"})})}const Ae={outlined:"material-symbols-outlined",rounded:"material-symbols-rounded",sharp:"material-symbols-sharp"},Ee=require$$0.forwardRef(({name:e,variant:r="outlined",size:s="md",fill:o=0,weight:t=400,grade:n=0,opticalSize:l=24,style:a,className:i,...h},d)=>{const m=(e=>"number"==typeof e?e:"sm"===e?16:"md"===e?20:24)(s),w=`"FILL" ${o}, "wght" ${t}, "GRAD" ${n}, "opsz" ${l}`;return c.jsx("span",{ref:d,"aria-hidden":"true",className:Ae[r]+(i?` ${i}`:""),style:{fontVariationSettings:w,fontSize:m,lineHeight:1,display:"inline-flex",alignItems:"center",justifyContent:"center",verticalAlign:"middle",...a},...h,children:e})});Ee.displayName="MaterialIcon";
|
|
435
436
|
|
|
436
437
|
var jsxRuntime = {exports: {}};
|
|
437
438
|
|
|
@@ -769,7 +770,7 @@ function requireReactJsxRuntime_development () {
|
|
|
769
770
|
object.$$typeof === REACT_ELEMENT_TYPE
|
|
770
771
|
);
|
|
771
772
|
}
|
|
772
|
-
var React = require$$
|
|
773
|
+
var React = require$$0__default,
|
|
773
774
|
REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"),
|
|
774
775
|
REACT_PORTAL_TYPE = Symbol.for("react.portal"),
|
|
775
776
|
REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"),
|
|
@@ -1125,12 +1126,12 @@ const Autocomplete = ({ label, value, onChange, options = [], placeholder = "Sea
|
|
|
1125
1126
|
const getInputClassName = () => {
|
|
1126
1127
|
return classNames(styles.input, icon ? styles.inputWithIcon : undefined, clearable && value ? styles.inputWithClear : styles.inputWithoutClear, readOnly ? styles.inputReadOnly : undefined, error ? styles.inputError : undefined, warning && !error ? styles.inputWarning : undefined, isFocused && !error && !warning ? styles.inputFocused : undefined);
|
|
1127
1128
|
};
|
|
1128
|
-
return (jsxRuntimeExports$1.jsxs("div", { className: classNames(styles.container, className), children: [label && (jsxRuntimeExports$1.jsxs("label", { className: styles.label, children: [label, required && jsxRuntimeExports$1.jsx("span", { className: styles.required, children: "*" })] })), jsxRuntimeExports$1.jsxs("div", { ref: containerRef, className: styles.inputWrapper, children: [icon && jsxRuntimeExports$1.jsx("div", { className: styles.iconLeft, children: icon }), jsxRuntimeExports$1.jsx("input", { ref: inputRef, type: "text", value: displayValue, onChange: handleInputChange, onFocus: handleInputFocus, onBlur: handleInputBlur, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: disabled, readOnly: readOnly || !searchable, className: getInputClassName(), "data-testid": "autocomplete-input", "data-has-error": error ? "true" : "false", "data-has-warning": warning ? "true" : "false", "data-is-focused": isFocused ? "true" : "false" }), jsxRuntimeExports$1.jsxs("div", { className: styles.rightIcons, 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: styles.clearButton, "data-testid": "autocomplete-clear", "aria-label": "Clear selection", children: jsxRuntimeExports$1.jsx(
|
|
1129
|
+
return (jsxRuntimeExports$1.jsxs("div", { className: classNames(styles.container, className), children: [label && (jsxRuntimeExports$1.jsxs("label", { className: styles.label, children: [label, required && jsxRuntimeExports$1.jsx("span", { className: styles.required, children: "*" })] })), jsxRuntimeExports$1.jsxs("div", { ref: containerRef, className: styles.inputWrapper, children: [icon && jsxRuntimeExports$1.jsx("div", { className: styles.iconLeft, children: icon }), jsxRuntimeExports$1.jsx("input", { ref: inputRef, type: "text", value: displayValue, onChange: handleInputChange, onFocus: handleInputFocus, onBlur: handleInputBlur, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: disabled, readOnly: readOnly || !searchable, className: getInputClassName(), "data-testid": "autocomplete-input", "data-has-error": error ? "true" : "false", "data-has-warning": warning ? "true" : "false", "data-is-focused": isFocused ? "true" : "false" }), jsxRuntimeExports$1.jsxs("div", { className: styles.rightIcons, 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: styles.clearButton, "data-testid": "autocomplete-clear", "aria-label": "Clear selection", children: jsxRuntimeExports$1.jsx(z, { className: "w-4 h-4" }) })), jsxRuntimeExports$1.jsx("button", { type: "button", onClick: handleToggle, className: styles.toggleButton, disabled: disabled, "data-testid": "autocomplete-toggle", "aria-label": isOpen ? "Close dropdown" : "Open dropdown", children: jsxRuntimeExports$1.jsx(L, { className: classNames(styles.toggleIcon, isOpen && styles.toggleIconOpen) }) })] }), isOpen && !disabled && !readOnly && (jsxRuntimeExports$1.jsxs("div", { ref: dropdownRef, className: classNames(styles.dropdown, position === "top" && styles.dropdownTop), style: { maxHeight }, "data-testid": "autocomplete-dropdown", children: [loading && filteredOptions.length === 0 && (jsxRuntimeExports$1.jsxs("div", { className: styles.loadingState, children: [jsxRuntimeExports$1.jsx(LoadingSpinner, { size: "sm", variant: "spinner", className: styles.loadingSpinner }), jsxRuntimeExports$1.jsx("span", { className: styles.loadingText, children: loadingText })] })), jsxRuntimeExports$1.jsx("div", { className: styles.dropdownContent, children: !loading && filteredOptions.length > 0 && (jsxRuntimeExports$1.jsx(jsxRuntimeExports$1.Fragment, { children: filteredOptions.map((option, index) => {
|
|
1129
1130
|
const isSelected = option.value === value;
|
|
1130
1131
|
const isHighlighted = index === highlightedIndex;
|
|
1131
1132
|
return (jsxRuntimeExports$1.jsx("div", { ref: (el) => {
|
|
1132
1133
|
optionRefs.current[index] = el;
|
|
1133
|
-
}, onClick: () => handleSelect(option), onMouseEnter: () => setHighlightedIndex(index), className: classNames(styles.option, option.disabled && styles.optionDisabled, isHighlighted && styles.optionHighlighted, isSelected && styles.optionSelected), "data-testid": `autocomplete-option-${option.value}`, "data-disabled": option.disabled ? "true" : "false", "data-selected": isSelected ? "true" : "false", "data-highlighted": isHighlighted ? "true" : "false", children: renderOption ? (renderOption(option, isSelected)) : (jsxRuntimeExports$1.jsxs(jsxRuntimeExports$1.Fragment, { children: [jsxRuntimeExports$1.jsxs("div", { className: styles.optionContent, children: [jsxRuntimeExports$1.jsx("div", { className: styles.optionLabel, children: highlightMatchText(option.label, searchTerm, highlightMatch) }), option.description && (jsxRuntimeExports$1.jsx("div", { className: styles.optionDescription, children: option.description }))] }), isSelected && (jsxRuntimeExports$1.jsx(
|
|
1134
|
+
}, onClick: () => handleSelect(option), onMouseEnter: () => setHighlightedIndex(index), className: classNames(styles.option, option.disabled && styles.optionDisabled, isHighlighted && styles.optionHighlighted, isSelected && styles.optionSelected), "data-testid": `autocomplete-option-${option.value}`, "data-disabled": option.disabled ? "true" : "false", "data-selected": isSelected ? "true" : "false", "data-highlighted": isHighlighted ? "true" : "false", children: renderOption ? (renderOption(option, isSelected)) : (jsxRuntimeExports$1.jsxs(jsxRuntimeExports$1.Fragment, { children: [jsxRuntimeExports$1.jsxs("div", { className: styles.optionContent, children: [jsxRuntimeExports$1.jsx("div", { className: styles.optionLabel, children: highlightMatchText(option.label, searchTerm, highlightMatch) }), option.description && (jsxRuntimeExports$1.jsx("div", { className: styles.optionDescription, children: option.description }))] }), isSelected && (jsxRuntimeExports$1.jsx(v, { className: styles.optionCheckIcon }))] })) }, option.value));
|
|
1134
1135
|
}) })) }), onCreate && searchTerm && (jsxRuntimeExports$1.jsxs("div", { onClick: () => {
|
|
1135
1136
|
onCreate(searchTerm.trim());
|
|
1136
1137
|
setIsOpen(false);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rubenpazch/autocomplete",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.2",
|
|
4
4
|
"description": "Autocomplete component",
|
|
5
5
|
"private": false,
|
|
6
6
|
"main": "dist/index.cjs.js",
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
"react-dom": "^19.0.0"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@rubenpazch/icons": "4.0.
|
|
34
|
+
"@rubenpazch/icons": "4.0.2",
|
|
35
35
|
"@rubenpazch/loading-spinner": "3.0.0"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|