diff --git a/resources/dist/components/combobox.js b/resources/dist/components/combobox.js index 228f8d6..6a1256c 100644 --- a/resources/dist/components/combobox.js +++ b/resources/dist/components/combobox.js @@ -1 +1 @@ -function d(c){return c==null||c===""||typeof c=="string"&&c.trim()===""}function r(c){return!d(c)}var T=class{constructor({element:t,options:e,placeholder:i,state:s,canOptionLabelsWrap:o=!0,canSelectPlaceholder:n=!0,initialOptionLabel:a=null,initialOptionLabels:l=null,initialState:h=null,isHtmlAllowed:p=!1,isAutofocused:f=!1,isDisabled:g=!1,isMultiple:y=!1,isSearchable:L=!1,getOptionLabelUsing:O=null,getOptionLabelsUsing:S=null,getOptionsUsing:I=null,getSearchResultsUsing:x=null,hasDynamicOptions:A=!1,hasDynamicSearchResults:v=!0,searchPrompt:C="Search...",searchDebounce:w=1e3,loadingMessage:E="Loading...",searchingMessage:D="Searching...",noSearchResultsMessage:R="No results found",maxItems:k=null,maxItemsMessage:M="Maximum number of items selected",optionsLimit:N=null,searchableOptionFields:b=["label"],searchQuery:m=null,autoSearch:B=!1,livewireId:u=null,statePath:V=null,onStateChange:U=()=>{}}){this.element=t,this.options=e,this.originalOptions=JSON.parse(JSON.stringify(e)),this.placeholder=i,this.state=s,this.canOptionLabelsWrap=o,this.canSelectPlaceholder=n,this.initialOptionLabel=a,this.initialOptionLabels=l,this.initialState=h,this.isHtmlAllowed=p,this.isAutofocused=f,this.isDisabled=g,this.isMultiple=y,this.isSearchable=L,this.getOptionLabelUsing=O,this.getOptionLabelsUsing=S,this.getOptionsUsing=I,this.getSearchResultsUsing=x,this.hasDynamicOptions=A,this.hasDynamicSearchResults=v,this.searchPrompt=C,this.searchDebounce=w,this.loadingMessage=E,this.searchingMessage=D,this.noSearchResultsMessage=R,this.maxItems=k,this.maxItemsMessage=M,this.optionsLimit=N,this.searchableOptionFields=Array.isArray(b)?b:["label"],this.initialSearchQuery=m,this.autoSearch=B,this.livewireId=u,this.statePath=V,this.onStateChange=U,this.labelRepository={},this.selectedIndex=-1,this.searchQuery=m||"",this.searchTimeout=null,this.isSearching=!1,this.selectedDisplayVersion=0,this.render(),this.setUpEventListeners(),this.isAutofocused&&this.searchInput&&this.searchInput.focus(),this.autoSearch&&r(this.initialSearchQuery)&&this.performInitialSearch()}populateLabelRepositoryFromOptions(t){if(!(!t||!Array.isArray(t)))for(let e of t)e.options&&Array.isArray(e.options)?this.populateLabelRepositoryFromOptions(e.options):e.value!==void 0&&e.label!==void 0&&(this.labelRepository[e.value]=e.label)}render(){this.populateLabelRepositoryFromOptions(this.options),this.container=document.createElement("div"),this.container.className="prvious-combobox-input-ctn",this.canOptionLabelsWrap||this.container.classList.add("prvious-combobox-input-ctn-option-labels-not-wrapped"),this.isMultiple&&(this.selectedDisplay=document.createElement("div"),this.selectedDisplay.className="prvious-combobox-input-value-ctn",this.container.appendChild(this.selectedDisplay)),this.searchContainer=document.createElement("div"),this.searchContainer.className="prvious-combobox-input-search-ctn";let t=document.createElement("span");t.className="prvious-combobox-search-icon",this.isSearchable?t.innerHTML='':t.innerHTML='',this.searchContainer.appendChild(t),this.searchInput=document.createElement("input"),this.searchInput.className="fi-input prvious-combobox-unified-input",this.searchInput.type="text",this.isSearchable?this.searchInput.setAttribute("aria-label","Search"):(this.searchInput.readOnly=!0,this.searchInput.setAttribute("aria-label","Selected value")),this.searchQuery&&(this.searchInput.value=this.searchQuery),this.searchContainer.appendChild(this.searchInput),!this.isMultiple&&this.canSelectPlaceholder&&(this.clearButton=document.createElement("button"),this.clearButton.type="button",this.clearButton.className="prvious-combobox-input-value-remove-btn",this.clearButton.innerHTML='',this.clearButton.setAttribute("aria-label","Clear selection"),this.clearButton.style.display="none",this.clearButton.addEventListener("click",e=>{e.stopPropagation(),this.selectOption("")}),this.clearButton.addEventListener("keydown",e=>{(e.key===" "||e.key==="Enter")&&(e.preventDefault(),e.stopPropagation(),this.selectOption(""))}),this.searchContainer.appendChild(this.clearButton)),this.container.appendChild(this.searchContainer),this.updateSelectedDisplay(),this.optionsContainer=document.createElement("div"),this.optionsContainer.className="prvious-combobox-options-wrapper max-h-60 overflow-y-auto",this.optionsContainer.setAttribute("role","listbox"),this.optionsContainer.setAttribute("tabindex","-1"),this.isMultiple&&this.optionsContainer.setAttribute("aria-multiselectable","true"),this.optionsList=document.createElement("ul"),this.renderOptions(),this.optionsContainer.appendChild(this.optionsList),this.container.appendChild(this.optionsContainer),this.element.appendChild(this.container),this.applyDisabledState(),this.hasDynamicOptions&&this.getOptionsUsing&&this.loadDynamicOptions()}async loadDynamicOptions(){this.showLoadingState(!1);try{let t=await this.getOptionsUsing(),e=Array.isArray(t)?t:t&&Array.isArray(t.options)?t.options:[];this.options=e,this.originalOptions=JSON.parse(JSON.stringify(e)),this.populateLabelRepositoryFromOptions(e),this.renderOptions()}catch(t){console.error("Error fetching options:",t),this.hideLoadingState()}}async performInitialSearch(){if(!this.isSearchable||!this.searchInput)return;let t=this.initialSearchQuery;if(r(t)){if(this.searchQuery=t,this.searchInput.value=t,!this.getSearchResultsUsing||typeof this.getSearchResultsUsing!="function"||!this.hasDynamicSearchResults){this.filterOptions(t.trim().toLowerCase());return}this.isSearching=!0;try{this.showLoadingState(!0);let e=await this.getSearchResultsUsing(t),i=Array.isArray(e)?e:e&&Array.isArray(e.options)?e.options:[];this.options=i,this.populateLabelRepositoryFromOptions(i),this.hideLoadingState(),this.renderOptions(),this.options.length===0&&this.showNoResultsMessage()}catch(e){console.error("Error fetching initial search results:",e),this.hideLoadingState(),this.options=JSON.parse(JSON.stringify(this.originalOptions)),this.renderOptions()}finally{this.isSearching=!1}}}renderOptions(){this.optionsList.innerHTML="";let t=0,e=this.options,i=0,s=!1;this.options.forEach(a=>{a.options&&Array.isArray(a.options)?(i+=a.options.length,s=!0):i++}),s?this.optionsList.className="prvious-combobox-input-options-ctn":i>0&&(this.optionsList.className="fi-dropdown-list");let o=s?null:this.optionsList,n=0;for(let a of e){if(this.optionsLimit&&n>=this.optionsLimit)break;if(a.options&&Array.isArray(a.options)){let l=a.options;if(this.isMultiple&&Array.isArray(this.state)&&this.state.length>0&&(l=a.options.filter(h=>!this.state.includes(h.value))),l.length>0){if(this.optionsLimit){let h=this.optionsLimit-n;h{let a=this.createOptionElement(n.value,n);o.appendChild(a)}),i.appendChild(s),i.appendChild(o),this.optionsList.appendChild(i)}createOptionElement(t,e){let i=t,s=e,o=!1;typeof e=="object"&&e!==null&&"label"in e&&"value"in e&&(i=e.value,s=e.label,o=e.isDisabled||!1);let n=document.createElement("li");n.className="fi-dropdown-list-item prvious-combobox-input-option",o&&n.classList.add("fi-disabled");let a=`prvious-combobox-input-option-${Math.random().toString(36).substring(2,11)}`;if(n.id=a,n.setAttribute("role","option"),n.setAttribute("data-value",i),n.setAttribute("tabindex","0"),o&&n.setAttribute("aria-disabled","true"),this.isHtmlAllowed&&typeof s=="string"){let p=document.createElement("div");p.innerHTML=s;let f=p.textContent||p.innerText||s;n.setAttribute("aria-label",f)}let l=this.isMultiple?Array.isArray(this.state)&&this.state.includes(i):this.state===i;n.setAttribute("aria-selected",l?"true":"false"),l&&n.classList.add("fi-selected");let h=document.createElement("span");return this.isHtmlAllowed?h.innerHTML=s:h.textContent=s,n.appendChild(h),o||n.addEventListener("click",p=>{p.preventDefault(),p.stopPropagation(),this.selectOption(i),this.isMultiple&&(this.isSearchable&&this.searchInput?setTimeout(()=>{this.searchInput.focus()},0):setTimeout(()=>{n.focus()},0))}),n}async updateSelectedDisplay(){this.selectedDisplayVersion=this.selectedDisplayVersion+1;let t=this.selectedDisplayVersion;if(!this.searchInput)return;if(this.isMultiple){let i=document.createDocumentFragment();if(!Array.isArray(this.state)||this.state.length===0)this.searchInput.placeholder=this.placeholder,this.selectedDisplay&&this.selectedDisplay.replaceChildren(i);else{let s=await this.getLabelsForMultipleSelection();if(t!==this.selectedDisplayVersion)return;this.addBadgesForSelectedOptions(s,i),this.searchInput.placeholder=this.searchPrompt,t===this.selectedDisplayVersion&&this.selectedDisplay&&this.selectedDisplay.replaceChildren(i)}return}if(this.state===null||this.state===""){this.searchInput.placeholder=this.placeholder,this.searchQuery="",this.searchInput.value="",this.clearButton&&(this.clearButton.style.display="none");return}let e=await this.getLabelForSingleSelection();if(t===this.selectedDisplayVersion){if(!this.searchQuery)if(this.isHtmlAllowed){let i=document.createElement("div");i.innerHTML=e,this.searchInput.placeholder=i.textContent||i.innerText||""}else this.searchInput.placeholder=e;this.clearButton&&(this.clearButton.style.display="")}}async getLabelsForMultipleSelection(){let t=this.getSelectedOptionLabels(),e=[];if(Array.isArray(this.state)){for(let s of this.state)if(!r(this.labelRepository[s])){if(r(t[s])){this.labelRepository[s]=t[s];continue}e.push(s.toString())}}if(e.length>0&&r(this.initialOptionLabels)&&JSON.stringify(this.state)===JSON.stringify(this.initialState)){if(Array.isArray(this.initialOptionLabels))for(let s of this.initialOptionLabels)r(s)&&s.value!==void 0&&s.label!==void 0&&e.includes(s.value)&&(this.labelRepository[s.value]=s.label)}else if(e.length>0&&this.getOptionLabelsUsing)try{let s=await this.getOptionLabelsUsing();for(let o of s)r(o)&&o.value!==void 0&&o.label!==void 0&&(this.labelRepository[o.value]=o.label)}catch(s){console.error("Error fetching option labels:",s)}let i=[];if(Array.isArray(this.state))for(let s of this.state)r(this.labelRepository[s])?i.push(this.labelRepository[s]):r(t[s])?i.push(t[s]):i.push(s);return i}createBadgeElement(t,e){let i=document.createElement("span");i.className="fi-badge fi-size-md fi-color fi-color-primary fi-text-color-600 dark:fi-text-color-200",r(t)&&i.setAttribute("data-value",t);let s=document.createElement("span");s.className="fi-badge-label-ctn";let o=document.createElement("span");o.className="fi-badge-label",this.canOptionLabelsWrap&&o.classList.add("fi-wrapped"),this.isHtmlAllowed?o.innerHTML=e:o.textContent=e,s.appendChild(o),i.appendChild(s);let n=this.createRemoveButton(t,e);return i.appendChild(n),i}createRemoveButton(t,e){let i=document.createElement("button");return i.type="button",i.className="fi-badge-delete-btn",i.innerHTML='',i.setAttribute("aria-label","Remove "+(this.isHtmlAllowed?e.replace(/<[^>]*>/g,""):e)),i.addEventListener("click",s=>{s.stopPropagation(),r(t)&&this.selectOption(t)}),i.addEventListener("keydown",s=>{(s.key===" "||s.key==="Enter")&&(s.preventDefault(),s.stopPropagation(),r(t)&&this.selectOption(t))}),i}addBadgesForSelectedOptions(t,e=this.selectedDisplay){let i=document.createElement("div");i.className="prvious-combobox-input-value-badges-ctn",t.forEach((s,o)=>{let n=Array.isArray(this.state)?this.state[o]:null,a=this.createBadgeElement(n,s);i.appendChild(a)}),e.appendChild(i)}async getLabelForSingleSelection(){let t=this.labelRepository[this.state];if(d(t)&&(t=this.getSelectedOptionLabel(this.state)),d(t)&&r(this.initialOptionLabel)&&this.state===this.initialState)t=this.initialOptionLabel,r(this.state)&&(this.labelRepository[this.state]=t);else if(d(t)&&this.getOptionLabelUsing)try{t=await this.getOptionLabelUsing(),r(t)&&r(this.state)&&(this.labelRepository[this.state]=t)}catch(e){console.error("Error fetching option label:",e),t=this.state}else d(t)&&(t=this.state);return t}getSelectedOptionLabel(t){if(r(this.labelRepository[t]))return this.labelRepository[t];let e="";for(let i of this.options)if(i.options&&Array.isArray(i.options)){for(let s of i.options)if(s.value===t){e=s.label,this.labelRepository[t]=e;break}}else if(i.value===t){e=i.label,this.labelRepository[t]=e;break}return e}setUpEventListeners(){this.isSearchable&&this.searchInput&&(this.searchInput.addEventListener("input",t=>{this.isDisabled||this.handleSearch(t)}),this.searchInput.addEventListener("keydown",t=>{if(!this.isDisabled){if(t.key==="Tab"){t.preventDefault();let e=this.getVisibleOptions();if(e.length===0)return;t.shiftKey?this.selectedIndex=e.length-1:this.selectedIndex=0,e.forEach(i=>{i.classList.remove("fi-selected")}),e[this.selectedIndex].classList.add("fi-selected"),e[this.selectedIndex].focus()}else if(t.key==="ArrowDown"){if(t.preventDefault(),t.stopPropagation(),this.getVisibleOptions().length===0)return;this.selectedIndex=-1,this.searchInput.blur(),this.focusNextOption()}else if(t.key==="ArrowUp"){t.preventDefault(),t.stopPropagation();let e=this.getVisibleOptions();if(e.length===0)return;this.selectedIndex=e.length-1,this.searchInput.blur(),e[this.selectedIndex].classList.add("fi-selected"),e[this.selectedIndex].focus(),e[this.selectedIndex].id&&this.optionsContainer.setAttribute("aria-activedescendant",e[this.selectedIndex].id),this.scrollOptionIntoView(e[this.selectedIndex])}else if(t.key==="Enter"){if(t.preventDefault(),t.stopPropagation(),this.isSearching)return;let e=this.getVisibleOptions();if(e.length===0)return;let i=e.find(o=>{let n=o.getAttribute("aria-disabled")==="true",a=o.classList.contains("fi-disabled"),l=o.offsetParent===null;return!(n||a||l)});if(!i)return;let s=i.getAttribute("data-value");if(s===null)return;this.selectOption(s)}}})),this.optionsContainerKeydownListener=t=>{this.isDisabled||this.isSearchable&&document.activeElement===this.searchInput&&!["Tab","Escape"].includes(t.key)||this.handleOptionsKeydown(t)},this.optionsContainer.addEventListener("keydown",this.optionsContainerKeydownListener),!this.isMultiple&&this.livewireId&&this.statePath&&this.getOptionLabelUsing&&(this.refreshOptionLabelListener=async t=>{if(t.detail.livewireId===this.livewireId&&t.detail.statePath===this.statePath&&r(this.state))try{delete this.labelRepository[this.state];let e=await this.getOptionLabelUsing();r(e)&&(this.labelRepository[this.state]=e),this.updateSelectedDisplay(),this.updateOptionLabelInList(this.state,e)}catch(e){console.error("Error refreshing option label:",e)}},window.addEventListener("filament-forms::select.refreshSelectedOptionLabel",this.refreshOptionLabelListener))}updateOptionLabelInList(t,e){this.labelRepository[t]=e;let i=this.getVisibleOptions();for(let s of i)if(s.getAttribute("data-value")===String(t)){if(s.innerHTML="",this.isHtmlAllowed){let o=document.createElement("span");o.innerHTML=e,s.appendChild(o)}else s.appendChild(document.createTextNode(e));break}for(let s of this.options)if(s.options&&Array.isArray(s.options)){for(let o of s.options)if(o.value===t){o.label=e;break}}else if(s.value===t){s.label=e;break}for(let s of this.originalOptions)if(s.options&&Array.isArray(s.options)){for(let o of s.options)if(o.value===t){o.label=e;break}}else if(s.value===t){s.label=e;break}}handleOptionsKeydown(t){switch(t.key){case"ArrowDown":t.preventDefault(),t.stopPropagation(),this.focusNextOption();break;case"ArrowUp":t.preventDefault(),t.stopPropagation(),this.focusPreviousOption();break;case" ":if(t.preventDefault(),this.selectedIndex>=0){let e=this.getVisibleOptions()[this.selectedIndex];e&&e.click()}break;case"Enter":if(t.preventDefault(),this.selectedIndex>=0){let e=this.getVisibleOptions()[this.selectedIndex];e&&e.click()}break;case"Tab":break;default:if(this.isSearchable&&!t.ctrlKey&&!t.metaKey&&!t.altKey&&typeof t.key=="string"&&t.key.length===1){t.preventDefault();let e=t.key;this.searchInput&&(this.searchInput.focus(),this.searchInput.value=(this.searchInput.value||"")+e,this.searchInput.dispatchEvent(new Event("input",{bubbles:!0})))}break}}focusNextOption(){let t=this.getVisibleOptions();if(t.length!==0){if(this.selectedIndex>=0&&this.selectedIndex=0&&this.selectedIndexe.bottom?this.optionsContainer.scrollTop+=i.bottom-e.bottom:i.top li[role="option"]')):t=Array.from(this.optionsList.querySelectorAll(':scope > ul.fi-dropdown-list > li[role="option"]'));let e=Array.from(this.optionsList.querySelectorAll('li.prvious-combobox-input-option-group > ul > li[role="option"]'));return[...t,...e]}getSelectedOptionLabels(){if(!Array.isArray(this.state)||this.state.length===0)return{};let t={};for(let e of this.state){let i=!1;for(let s of this.options)if(s.options&&Array.isArray(s.options)){for(let o of s.options)if(o.value===e){t[e]=o.label,i=!0;break}if(i)break}else if(s.value===e){t[e]=s.label,i=!0;break}}return t}handleSearch(t){let e=t.target.value.trim().toLowerCase();if(this.searchQuery=e,this.searchTimeout&&clearTimeout(this.searchTimeout),e===""){this.options=JSON.parse(JSON.stringify(this.originalOptions)),this.renderOptions();return}if(!this.getSearchResultsUsing||typeof this.getSearchResultsUsing!="function"||!this.hasDynamicSearchResults){this.filterOptions(e);return}this.searchTimeout=setTimeout(async()=>{this.searchTimeout=null,this.isSearching=!0;try{this.showLoadingState(!0);let i=await this.getSearchResultsUsing(e),s=Array.isArray(i)?i:i&&Array.isArray(i.options)?i.options:[];this.options=s,this.populateLabelRepositoryFromOptions(s),this.hideLoadingState(),this.renderOptions(),this.options.length===0&&this.showNoResultsMessage()}catch(i){console.error("Error fetching search results:",i),this.hideLoadingState(),this.options=JSON.parse(JSON.stringify(this.originalOptions)),this.renderOptions()}finally{this.isSearching=!1}},this.searchDebounce)}showLoadingState(t=!1){this.optionsList.parentNode===this.optionsContainer&&this.optionsContainer.removeChild(this.optionsList),this.hideLoadingState();let e=document.createElement("div");e.className="prvious-combobox-input-message",e.textContent=t?this.searchingMessage:this.loadingMessage,this.optionsContainer.appendChild(e)}hideLoadingState(){let t=this.optionsContainer.querySelector(".prvious-combobox-input-message");t&&t.remove()}showNoResultsMessage(){this.optionsList.parentNode===this.optionsContainer&&this.optionsContainer.removeChild(this.optionsList),this.hideLoadingState();let t=document.createElement("div");t.className="prvious-combobox-input-message",t.textContent=this.noSearchResultsMessage,this.optionsContainer.appendChild(t)}filterOptions(t){let e=this.searchableOptionFields.includes("label"),i=this.searchableOptionFields.includes("value"),s=[];for(let o of this.originalOptions)if(o.options&&Array.isArray(o.options)){let n=o.options.filter(a=>e&&a.label.toLowerCase().includes(t)||i&&String(a.value).toLowerCase().includes(t));n.length>0&&s.push({label:o.label,options:n})}else(e&&o.label.toLowerCase().includes(t)||i&&String(o.value).toLowerCase().includes(t))&&s.push(o);this.options=s,this.renderOptions(),this.options.length===0&&this.showNoResultsMessage()}selectOption(t){if(this.isDisabled)return;if(!this.isMultiple){this.state=t,this.searchQuery="",this.searchInput&&(this.searchInput.value=""),this.options=JSON.parse(JSON.stringify(this.originalOptions)),this.updateSelectedDisplay(),this.renderOptions(),this.onStateChange(this.state);return}let e=Array.isArray(this.state)?[...this.state]:[];if(e.includes(t)){let s=this.selectedDisplay.querySelector(`[data-value="${t}"]`);if(r(s)){let o=s.parentElement;r(o)&&o.children.length===1?(e=e.filter(n=>n!==t),this.state=e,this.updateSelectedDisplay()):(s.remove(),e=e.filter(n=>n!==t),this.state=e)}else e=e.filter(o=>o!==t),this.state=e,this.updateSelectedDisplay();this.renderOptions(),this.maintainFocusInMultipleMode(),this.onStateChange(this.state);return}if(this.maxItems&&e.length>=this.maxItems){this.maxItemsMessage&&alert(this.maxItemsMessage);return}e.push(t),this.state=e;let i=this.selectedDisplay.querySelector(".prvious-combobox-input-value-badges-ctn");d(i)?this.updateSelectedDisplay():this.addSingleBadge(t,i),this.renderOptions(),this.maintainFocusInMultipleMode(),this.onStateChange(this.state)}async addSingleBadge(t,e){let i=this.labelRepository[t];if(d(i)&&(i=this.getSelectedOptionLabel(t),r(i)&&(this.labelRepository[t]=i)),d(i)&&this.getOptionLabelsUsing)try{let o=await this.getOptionLabelsUsing();for(let n of o)if(r(n)&&n.value===t&&n.label!==void 0){i=n.label,this.labelRepository[t]=i;break}}catch(o){console.error("Error fetching option label:",o)}d(i)&&(i=t);let s=this.createBadgeElement(t,i);e.appendChild(s)}maintainFocusInMultipleMode(){if(this.isSearchable&&this.searchInput){this.searchInput.focus();return}let t=this.getVisibleOptions();if(t.length!==0){if(this.selectedIndex=-1,Array.isArray(this.state)&&this.state.length>0){for(let e=0;e{e.setAttribute("disabled","disabled"),e.classList.add("fi-disabled")}),!this.isMultiple&&this.canSelectPlaceholder&&this.clearButton&&(this.clearButton.setAttribute("disabled","disabled"),this.clearButton.classList.add("fi-disabled")),this.isSearchable&&this.searchInput&&(this.searchInput.setAttribute("disabled","disabled"),this.searchInput.classList.add("fi-disabled"))):(this.container.classList.remove("fi-disabled"),this.isMultiple&&this.container.querySelectorAll(".fi-badge-delete-btn").forEach(e=>{e.removeAttribute("disabled"),e.classList.remove("fi-disabled")}),!this.isMultiple&&this.canSelectPlaceholder&&this.clearButton&&(this.clearButton.removeAttribute("disabled"),this.clearButton.classList.remove("fi-disabled")),this.isSearchable&&this.searchInput&&(this.searchInput.removeAttribute("disabled"),this.searchInput.classList.remove("fi-disabled")))}destroy(){this.searchInput&&this.searchInput.removeEventListener("input",this.handleSearch),this.optionsContainer&&this.optionsContainerKeydownListener&&this.optionsContainer.removeEventListener("keydown",this.optionsContainerKeydownListener),this.refreshOptionLabelListener&&window.removeEventListener("filament-forms::select.refreshSelectedOptionLabel",this.refreshOptionLabelListener),this.searchTimeout&&(clearTimeout(this.searchTimeout),this.searchTimeout=null),this.container&&this.container.remove()}};function P({canOptionLabelsWrap:c,canSelectPlaceholder:t,isHtmlAllowed:e,getOptionLabelUsing:i,getOptionLabelsUsing:s,getOptionsUsing:o,getSearchResultsUsing:n,initialOptionLabel:a,initialOptionLabels:l,initialState:h,isAutofocused:p,isDisabled:f,isMultiple:g,isSearchable:y,hasDynamicOptions:L,hasDynamicSearchResults:O,livewireId:S,loadingMessage:I,maxItems:x,maxItemsMessage:A,noSearchResultsMessage:v,options:C,optionsLimit:w,placeholder:E,searchDebounce:D,searchingMessage:R,searchPrompt:k,searchableOptionFields:M,searchQuery:N,autoSearch:b,state:m,statePath:B}){return{combobox:null,state:m,init(){this.combobox=new T({element:this.$refs.combobox,options:C,placeholder:E,state:this.state,canOptionLabelsWrap:c,canSelectPlaceholder:t,initialOptionLabel:a,initialOptionLabels:l,initialState:h,isHtmlAllowed:e,isAutofocused:p,isDisabled:f,isMultiple:g,isSearchable:y,getOptionLabelUsing:i,getOptionLabelsUsing:s,getOptionsUsing:o,getSearchResultsUsing:n,hasDynamicOptions:L,hasDynamicSearchResults:O,searchPrompt:k,searchDebounce:D,loadingMessage:I,searchingMessage:R,noSearchResultsMessage:v,maxItems:x,maxItemsMessage:A,optionsLimit:w,searchableOptionFields:M,searchQuery:N,autoSearch:b,livewireId:S,statePath:B,onStateChange:u=>{this.state=u}}),this.$watch("state",u=>{this.combobox&&this.combobox.state!==u&&(this.combobox.state=u,this.combobox.updateSelectedDisplay(),this.combobox.renderOptions())})},destroy(){this.combobox&&(this.combobox.destroy(),this.combobox=null)}}}export{P as default}; +function d(c){return c==null||c===""||typeof c=="string"&&c.trim()===""}function r(c){return!d(c)}var T=class{constructor({element:t,options:e,placeholder:i,state:s,canOptionLabelsWrap:o=!0,canSelectPlaceholder:n=!0,initialOptionLabel:a=null,initialOptionLabels:l=null,initialState:h=null,isHtmlAllowed:p=!1,isAutofocused:f=!1,isDisabled:g=!1,isMultiple:y=!1,isSearchable:L=!1,getOptionLabelUsing:O=null,getOptionLabelsUsing:S=null,getOptionsUsing:I=null,getSearchResultsUsing:x=null,hasDynamicOptions:A=!1,hasDynamicSearchResults:C=!0,searchPrompt:v="Search...",searchDebounce:w=1e3,loadingMessage:E="Loading...",searchingMessage:D="Searching...",noSearchResultsMessage:R="No results found",maxItems:k=null,maxItemsMessage:M="Maximum number of items selected",optionsLimit:N=null,searchableOptionFields:b=["label"],searchQuery:m=null,autoSearch:B=!1,livewireId:u=null,statePath:V=null,onStateChange:U=()=>{}}){this.element=t,this.options=e,this.originalOptions=JSON.parse(JSON.stringify(e)),this.placeholder=i,this.state=s,this.canOptionLabelsWrap=o,this.canSelectPlaceholder=n,this.initialOptionLabel=a,this.initialOptionLabels=l,this.initialState=h,this.isHtmlAllowed=p,this.isAutofocused=f,this.isDisabled=g,this.isMultiple=y,this.isSearchable=L,this.getOptionLabelUsing=O,this.getOptionLabelsUsing=S,this.getOptionsUsing=I,this.getSearchResultsUsing=x,this.hasDynamicOptions=A,this.hasDynamicSearchResults=C,this.searchPrompt=v,this.searchDebounce=w,this.loadingMessage=E,this.searchingMessage=D,this.noSearchResultsMessage=R,this.maxItems=k,this.maxItemsMessage=M,this.optionsLimit=N,this.searchableOptionFields=Array.isArray(b)?b:["label"],this.initialSearchQuery=m,this.autoSearch=B,this.livewireId=u,this.statePath=V,this.onStateChange=U,this.labelRepository={},this.selectedIndex=-1,this.searchQuery=m||"",this.searchTimeout=null,this.isSearching=!1,this.selectedDisplayVersion=0,this.render(),this.setUpEventListeners(),this.isAutofocused&&this.searchInput&&this.searchInput.focus(),this.autoSearch&&r(this.initialSearchQuery)&&this.performInitialSearch()}populateLabelRepositoryFromOptions(t){if(!(!t||!Array.isArray(t)))for(let e of t)e.options&&Array.isArray(e.options)?this.populateLabelRepositoryFromOptions(e.options):e.value!==void 0&&e.label!==void 0&&(this.labelRepository[e.value]=e.label)}render(){this.populateLabelRepositoryFromOptions(this.options),this.container=document.createElement("div"),this.container.className="prvious-combobox-input-ctn",this.canOptionLabelsWrap||this.container.classList.add("prvious-combobox-input-ctn-option-labels-not-wrapped"),this.isMultiple&&(this.selectedDisplay=document.createElement("div"),this.selectedDisplay.className="prvious-combobox-input-value-ctn",this.container.appendChild(this.selectedDisplay)),this.searchContainer=document.createElement("div"),this.searchContainer.className="prvious-combobox-input-search-ctn";let t=document.createElement("span");t.className="prvious-combobox-search-icon",this.isSearchable?t.innerHTML='':t.innerHTML='',this.searchContainer.appendChild(t),this.searchInput=document.createElement("input"),this.searchInput.className="fi-input prvious-combobox-unified-input",this.searchInput.type="text",this.isSearchable?this.searchInput.setAttribute("aria-label","Search"):(this.searchInput.readOnly=!0,this.searchInput.setAttribute("aria-label","Selected value")),this.searchQuery&&(this.searchInput.value=this.searchQuery),this.searchContainer.appendChild(this.searchInput),!this.isMultiple&&this.canSelectPlaceholder&&(this.clearButton=document.createElement("button"),this.clearButton.type="button",this.clearButton.className="prvious-combobox-input-value-remove-btn",this.clearButton.innerHTML='',this.clearButton.setAttribute("aria-label","Clear selection"),this.clearButton.style.display="none",this.clearButton.addEventListener("click",e=>{e.stopPropagation(),this.selectOption("")}),this.clearButton.addEventListener("keydown",e=>{(e.key===" "||e.key==="Enter")&&(e.preventDefault(),e.stopPropagation(),this.selectOption(""))}),this.searchContainer.appendChild(this.clearButton)),this.container.appendChild(this.searchContainer),this.updateSelectedDisplay(),this.optionsContainer=document.createElement("div"),this.optionsContainer.className="prvious-combobox-options-wrapper max-h-60 overflow-y-auto",this.optionsContainer.setAttribute("role","listbox"),this.optionsContainer.setAttribute("tabindex","-1"),this.isMultiple&&this.optionsContainer.setAttribute("aria-multiselectable","true"),this.optionsList=document.createElement("ul"),this.renderOptions(),this.optionsContainer.appendChild(this.optionsList),this.container.appendChild(this.optionsContainer),this.element.appendChild(this.container),this.applyDisabledState(),this.hasDynamicOptions&&this.getOptionsUsing&&this.loadDynamicOptions()}async loadDynamicOptions(){this.showLoadingState(!1);try{let t=await this.getOptionsUsing(),e=Array.isArray(t)?t:t&&Array.isArray(t.options)?t.options:[];this.options=e,this.originalOptions=JSON.parse(JSON.stringify(e)),this.populateLabelRepositoryFromOptions(e),this.renderOptions()}catch(t){console.error("Error fetching options:",t),this.hideLoadingState()}}async performInitialSearch(){if(!this.isSearchable||!this.searchInput)return;let t=this.initialSearchQuery;if(r(t)){if(this.searchQuery=t,this.searchInput.value=t,!this.getSearchResultsUsing||typeof this.getSearchResultsUsing!="function"||!this.hasDynamicSearchResults){this.filterOptions(t.trim().toLowerCase());return}this.isSearching=!0;try{this.showLoadingState(!0);let e=await this.getSearchResultsUsing(t),i=Array.isArray(e)?e:e&&Array.isArray(e.options)?e.options:[];this.options=i,this.populateLabelRepositoryFromOptions(i),this.hideLoadingState(),this.renderOptions(),this.options.length===0&&this.showNoResultsMessage()}catch(e){console.error("Error fetching initial search results:",e),this.hideLoadingState(),this.options=JSON.parse(JSON.stringify(this.originalOptions)),this.renderOptions()}finally{this.isSearching=!1}}}renderOptions(){this.optionsList.innerHTML="";let t=0,e=this.options,i=0,s=!1;this.options.forEach(a=>{a.options&&Array.isArray(a.options)?(i+=a.options.length,s=!0):i++}),s?this.optionsList.className="prvious-combobox-input-options-ctn":i>0&&(this.optionsList.className="fi-dropdown-list");let o=s?null:this.optionsList,n=0;for(let a of e){if(this.optionsLimit&&n>=this.optionsLimit)break;if(a.options&&Array.isArray(a.options)){let l=a.options;if(this.isMultiple&&Array.isArray(this.state)&&this.state.length>0&&(l=a.options.filter(h=>!this.state.includes(h.value))),l.length>0){if(this.optionsLimit){let h=this.optionsLimit-n;h{let a=this.createOptionElement(n.value,n);o.appendChild(a)}),i.appendChild(s),i.appendChild(o),this.optionsList.appendChild(i)}createOptionElement(t,e){let i=t,s=e,o=!1;typeof e=="object"&&e!==null&&"label"in e&&"value"in e&&(i=e.value,s=e.label,o=e.isDisabled||!1);let n=document.createElement("li");n.className="fi-dropdown-list-item prvious-combobox-input-option",o&&n.classList.add("fi-disabled");let a=`prvious-combobox-input-option-${Math.random().toString(36).substring(2,11)}`;if(n.id=a,n.setAttribute("role","option"),n.setAttribute("data-value",i),n.setAttribute("tabindex","0"),o&&n.setAttribute("aria-disabled","true"),this.isHtmlAllowed&&typeof s=="string"){let p=document.createElement("div");p.innerHTML=s;let f=p.textContent||p.innerText||s;n.setAttribute("aria-label",f)}let l=this.isMultiple?Array.isArray(this.state)&&this.state.includes(i):this.state===i;n.setAttribute("aria-selected",l?"true":"false"),l&&n.classList.add("fi-selected");let h=document.createElement("span");return this.isHtmlAllowed?h.innerHTML=s:h.textContent=s,n.appendChild(h),o||n.addEventListener("click",p=>{p.preventDefault(),p.stopPropagation(),this.selectOption(i),this.isMultiple&&(this.isSearchable&&this.searchInput?setTimeout(()=>{this.searchInput.focus()},0):setTimeout(()=>{n.focus()},0))}),n}async updateSelectedDisplay(){this.selectedDisplayVersion=this.selectedDisplayVersion+1;let t=this.selectedDisplayVersion;if(!this.searchInput)return;if(this.isMultiple){let i=document.createDocumentFragment();if(!Array.isArray(this.state)||this.state.length===0)this.searchInput.placeholder=this.placeholder,this.selectedDisplay&&this.selectedDisplay.replaceChildren(i);else{let s=await this.getLabelsForMultipleSelection();if(t!==this.selectedDisplayVersion)return;this.addBadgesForSelectedOptions(s,i),this.searchInput.placeholder=this.searchPrompt,t===this.selectedDisplayVersion&&this.selectedDisplay&&this.selectedDisplay.replaceChildren(i)}return}if(this.state===null||this.state===""){this.searchInput.placeholder=this.placeholder,this.searchQuery="",this.searchInput.value="",this.clearButton&&(this.clearButton.style.display="none");return}let e=await this.getLabelForSingleSelection();if(t===this.selectedDisplayVersion){if(!this.searchQuery)if(this.isHtmlAllowed){let i=document.createElement("div");i.innerHTML=e,this.searchInput.placeholder=i.textContent||i.innerText||""}else this.searchInput.placeholder=e;this.clearButton&&(this.clearButton.style.display="")}}async getLabelsForMultipleSelection(){let t=this.getSelectedOptionLabels(),e=[];if(Array.isArray(this.state)){for(let s of this.state)if(!r(this.labelRepository[s])){if(r(t[s])){this.labelRepository[s]=t[s];continue}e.push(s.toString())}}if(e.length>0&&r(this.initialOptionLabels)&&JSON.stringify(this.state)===JSON.stringify(this.initialState)){if(Array.isArray(this.initialOptionLabels))for(let s of this.initialOptionLabels)r(s)&&s.value!==void 0&&s.label!==void 0&&e.includes(s.value)&&(this.labelRepository[s.value]=s.label)}else if(e.length>0&&this.getOptionLabelsUsing)try{let s=await this.getOptionLabelsUsing();for(let o of s)r(o)&&o.value!==void 0&&o.label!==void 0&&(this.labelRepository[o.value]=o.label)}catch(s){console.error("Error fetching option labels:",s)}let i=[];if(Array.isArray(this.state))for(let s of this.state)r(this.labelRepository[s])?i.push(this.labelRepository[s]):r(t[s])?i.push(t[s]):i.push(s);return i}createBadgeElement(t,e){let i=document.createElement("span");i.className="fi-badge fi-size-md fi-color fi-color-primary fi-text-color-600 dark:fi-text-color-200",r(t)&&i.setAttribute("data-value",t);let s=document.createElement("span");s.className="fi-badge-label-ctn";let o=document.createElement("span");o.className="fi-badge-label",this.canOptionLabelsWrap&&o.classList.add("fi-wrapped"),this.isHtmlAllowed?o.innerHTML=e:o.textContent=e,s.appendChild(o),i.appendChild(s);let n=this.createRemoveButton(t,e);return i.appendChild(n),i}createRemoveButton(t,e){let i=document.createElement("button");return i.type="button",i.className="fi-badge-delete-btn",i.innerHTML='',i.setAttribute("aria-label","Remove "+(this.isHtmlAllowed?e.replace(/<[^>]*>/g,""):e)),i.addEventListener("click",s=>{s.stopPropagation(),r(t)&&this.selectOption(t)}),i.addEventListener("keydown",s=>{(s.key===" "||s.key==="Enter")&&(s.preventDefault(),s.stopPropagation(),r(t)&&this.selectOption(t))}),i}addBadgesForSelectedOptions(t,e=this.selectedDisplay){let i=document.createElement("div");i.className="prvious-combobox-input-value-badges-ctn",t.forEach((s,o)=>{let n=Array.isArray(this.state)?this.state[o]:null,a=this.createBadgeElement(n,s);i.appendChild(a)}),e.appendChild(i)}async getLabelForSingleSelection(){let t=this.labelRepository[this.state];if(d(t)&&(t=this.getSelectedOptionLabel(this.state)),d(t)&&r(this.initialOptionLabel)&&this.state===this.initialState)t=this.initialOptionLabel,r(this.state)&&(this.labelRepository[this.state]=t);else if(d(t)&&this.getOptionLabelUsing)try{t=await this.getOptionLabelUsing(),r(t)&&r(this.state)&&(this.labelRepository[this.state]=t)}catch(e){console.error("Error fetching option label:",e),t=this.state}else d(t)&&(t=this.state);return t}getSelectedOptionLabel(t){if(r(this.labelRepository[t]))return this.labelRepository[t];let e="";for(let i of this.options)if(i.options&&Array.isArray(i.options)){for(let s of i.options)if(s.value===t){e=s.label,this.labelRepository[t]=e;break}}else if(i.value===t){e=i.label,this.labelRepository[t]=e;break}return e}setUpEventListeners(){this.isSearchable&&this.searchInput&&(this.searchInput.addEventListener("input",t=>{this.isDisabled||this.handleSearch(t)}),this.searchInput.addEventListener("keydown",t=>{if(!this.isDisabled){if(t.key==="Tab"){t.preventDefault();let e=this.getVisibleOptions();if(e.length===0)return;t.shiftKey?this.selectedIndex=e.length-1:this.selectedIndex=0,e.forEach(i=>{i.classList.remove("fi-selected")}),e[this.selectedIndex].classList.add("fi-selected"),e[this.selectedIndex].focus()}else if(t.key==="ArrowDown"){if(t.preventDefault(),t.stopPropagation(),this.getVisibleOptions().length===0)return;this.selectedIndex=-1,this.searchInput.blur(),this.focusNextOption()}else if(t.key==="ArrowUp"){t.preventDefault(),t.stopPropagation();let e=this.getVisibleOptions();if(e.length===0)return;this.selectedIndex=e.length-1,this.searchInput.blur(),e[this.selectedIndex].classList.add("fi-selected"),e[this.selectedIndex].focus(),e[this.selectedIndex].id&&this.optionsContainer.setAttribute("aria-activedescendant",e[this.selectedIndex].id),this.scrollOptionIntoView(e[this.selectedIndex])}else if(t.key==="Enter"){if(t.preventDefault(),t.stopPropagation(),this.isSearching)return;let e=this.getVisibleOptions();if(e.length===0)return;let i=e.find(o=>{let n=o.getAttribute("aria-disabled")==="true",a=o.classList.contains("fi-disabled"),l=o.offsetParent===null;return!(n||a||l)});if(!i)return;let s=i.getAttribute("data-value");if(s===null)return;this.selectOption(s)}}})),this.optionsContainerKeydownListener=t=>{this.isDisabled||this.isSearchable&&document.activeElement===this.searchInput&&!["Tab","Escape"].includes(t.key)||this.handleOptionsKeydown(t)},this.optionsContainer.addEventListener("keydown",this.optionsContainerKeydownListener),!this.isMultiple&&this.livewireId&&this.statePath&&this.getOptionLabelUsing&&(this.refreshOptionLabelListener=async t=>{if(t.detail.livewireId===this.livewireId&&t.detail.statePath===this.statePath&&r(this.state))try{delete this.labelRepository[this.state];let e=await this.getOptionLabelUsing();r(e)&&(this.labelRepository[this.state]=e),this.updateSelectedDisplay(),this.updateOptionLabelInList(this.state,e)}catch(e){console.error("Error refreshing option label:",e)}},window.addEventListener("filament-forms::select.refreshSelectedOptionLabel",this.refreshOptionLabelListener))}updateOptionLabelInList(t,e){this.labelRepository[t]=e;let i=this.getVisibleOptions();for(let s of i)if(s.getAttribute("data-value")===String(t)){if(s.innerHTML="",this.isHtmlAllowed){let o=document.createElement("span");o.innerHTML=e,s.appendChild(o)}else s.appendChild(document.createTextNode(e));break}for(let s of this.options)if(s.options&&Array.isArray(s.options)){for(let o of s.options)if(o.value===t){o.label=e;break}}else if(s.value===t){s.label=e;break}for(let s of this.originalOptions)if(s.options&&Array.isArray(s.options)){for(let o of s.options)if(o.value===t){o.label=e;break}}else if(s.value===t){s.label=e;break}}handleOptionsKeydown(t){switch(t.key){case"ArrowDown":t.preventDefault(),t.stopPropagation(),this.focusNextOption();break;case"ArrowUp":t.preventDefault(),t.stopPropagation(),this.focusPreviousOption();break;case" ":if(t.preventDefault(),this.selectedIndex>=0){let e=this.getVisibleOptions()[this.selectedIndex];e&&e.click()}break;case"Enter":if(t.preventDefault(),this.selectedIndex>=0){let e=this.getVisibleOptions()[this.selectedIndex];e&&e.click()}break;case"Tab":break;default:if(this.isSearchable&&!t.ctrlKey&&!t.metaKey&&!t.altKey&&typeof t.key=="string"&&t.key.length===1){t.preventDefault();let e=t.key;this.searchInput&&(this.searchInput.focus(),this.searchInput.value=(this.searchInput.value||"")+e,this.searchInput.dispatchEvent(new Event("input",{bubbles:!0})))}break}}focusNextOption(){let t=this.getVisibleOptions();if(t.length!==0){if(this.selectedIndex>=0&&this.selectedIndex=0&&this.selectedIndexe.bottom?this.optionsContainer.scrollTop+=i.bottom-e.bottom:i.top li[role="option"]')):t=Array.from(this.optionsList.querySelectorAll(':scope > ul.fi-dropdown-list > li[role="option"]'));let e=Array.from(this.optionsList.querySelectorAll('li.prvious-combobox-input-option-group > ul > li[role="option"]'));return[...t,...e]}getSelectedOptionLabels(){if(!Array.isArray(this.state)||this.state.length===0)return{};let t={};for(let e of this.state){let i=!1;for(let s of this.options)if(s.options&&Array.isArray(s.options)){for(let o of s.options)if(o.value===e){t[e]=o.label,i=!0;break}if(i)break}else if(s.value===e){t[e]=s.label,i=!0;break}}return t}handleSearch(t){let e=t.target.value.trim().toLowerCase();if(this.searchQuery=e,this.searchTimeout&&clearTimeout(this.searchTimeout),e===""){this.options=JSON.parse(JSON.stringify(this.originalOptions)),this.renderOptions();return}if(!this.getSearchResultsUsing||typeof this.getSearchResultsUsing!="function"||!this.hasDynamicSearchResults){this.filterOptions(e);return}this.searchTimeout=setTimeout(async()=>{this.searchTimeout=null,this.isSearching=!0;try{this.showLoadingState(!0);let i=await this.getSearchResultsUsing(e),s=Array.isArray(i)?i:i&&Array.isArray(i.options)?i.options:[];this.options=s,this.populateLabelRepositoryFromOptions(s),this.hideLoadingState(),this.renderOptions(),this.options.length===0&&this.showNoResultsMessage()}catch(i){console.error("Error fetching search results:",i),this.hideLoadingState(),this.options=JSON.parse(JSON.stringify(this.originalOptions)),this.renderOptions()}finally{this.isSearching=!1}},this.searchDebounce)}showLoadingState(t=!1){this.optionsList.parentNode===this.optionsContainer&&this.optionsContainer.removeChild(this.optionsList),this.hideLoadingState();let e=document.createElement("div");e.className="prvious-combobox-input-message",e.textContent=t?this.searchingMessage:this.loadingMessage,this.optionsContainer.appendChild(e)}hideLoadingState(){let t=this.optionsContainer.querySelector(".prvious-combobox-input-message");t&&t.remove()}showNoResultsMessage(){this.optionsList.parentNode===this.optionsContainer&&this.optionsContainer.removeChild(this.optionsList),this.hideLoadingState();let t=document.createElement("div");t.className="prvious-combobox-input-message",t.textContent=this.noSearchResultsMessage,this.optionsContainer.appendChild(t)}filterOptions(t){let e=this.searchableOptionFields.includes("label"),i=this.searchableOptionFields.includes("value"),s=[];for(let o of this.originalOptions)if(o.options&&Array.isArray(o.options)){let n=o.options.filter(a=>e&&a.label.toLowerCase().includes(t)||i&&String(a.value).toLowerCase().includes(t));n.length>0&&s.push({label:o.label,options:n})}else(e&&o.label.toLowerCase().includes(t)||i&&String(o.value).toLowerCase().includes(t))&&s.push(o);this.options=s,this.renderOptions(),this.options.length===0&&this.showNoResultsMessage()}selectOption(t){if(this.isDisabled)return;if(!this.isMultiple){this.state=t,d(t)&&(this.searchQuery="",this.searchInput&&(this.searchInput.value=""),this.options=JSON.parse(JSON.stringify(this.originalOptions))),this.updateSelectedDisplay(),this.renderOptions(),this.onStateChange(this.state);return}let e=Array.isArray(this.state)?[...this.state]:[];if(e.includes(t)){let s=this.selectedDisplay.querySelector(`[data-value="${t}"]`);if(r(s)){let o=s.parentElement;r(o)&&o.children.length===1?(e=e.filter(n=>n!==t),this.state=e,this.updateSelectedDisplay()):(s.remove(),e=e.filter(n=>n!==t),this.state=e)}else e=e.filter(o=>o!==t),this.state=e,this.updateSelectedDisplay();this.renderOptions(),this.maintainFocusInMultipleMode(),this.onStateChange(this.state);return}if(this.maxItems&&e.length>=this.maxItems){this.maxItemsMessage&&alert(this.maxItemsMessage);return}e.push(t),this.state=e;let i=this.selectedDisplay.querySelector(".prvious-combobox-input-value-badges-ctn");d(i)?this.updateSelectedDisplay():this.addSingleBadge(t,i),this.renderOptions(),this.maintainFocusInMultipleMode(),this.onStateChange(this.state)}async addSingleBadge(t,e){let i=this.labelRepository[t];if(d(i)&&(i=this.getSelectedOptionLabel(t),r(i)&&(this.labelRepository[t]=i)),d(i)&&this.getOptionLabelsUsing)try{let o=await this.getOptionLabelsUsing();for(let n of o)if(r(n)&&n.value===t&&n.label!==void 0){i=n.label,this.labelRepository[t]=i;break}}catch(o){console.error("Error fetching option label:",o)}d(i)&&(i=t);let s=this.createBadgeElement(t,i);e.appendChild(s)}maintainFocusInMultipleMode(){if(this.isSearchable&&this.searchInput){this.searchInput.focus();return}let t=this.getVisibleOptions();if(t.length!==0){if(this.selectedIndex=-1,Array.isArray(this.state)&&this.state.length>0){for(let e=0;e{e.setAttribute("disabled","disabled"),e.classList.add("fi-disabled")}),!this.isMultiple&&this.canSelectPlaceholder&&this.clearButton&&(this.clearButton.setAttribute("disabled","disabled"),this.clearButton.classList.add("fi-disabled")),this.isSearchable&&this.searchInput&&(this.searchInput.setAttribute("disabled","disabled"),this.searchInput.classList.add("fi-disabled"))):(this.container.classList.remove("fi-disabled"),this.isMultiple&&this.container.querySelectorAll(".fi-badge-delete-btn").forEach(e=>{e.removeAttribute("disabled"),e.classList.remove("fi-disabled")}),!this.isMultiple&&this.canSelectPlaceholder&&this.clearButton&&(this.clearButton.removeAttribute("disabled"),this.clearButton.classList.remove("fi-disabled")),this.isSearchable&&this.searchInput&&(this.searchInput.removeAttribute("disabled"),this.searchInput.classList.remove("fi-disabled")))}destroy(){this.searchInput&&this.searchInput.removeEventListener("input",this.handleSearch),this.optionsContainer&&this.optionsContainerKeydownListener&&this.optionsContainer.removeEventListener("keydown",this.optionsContainerKeydownListener),this.refreshOptionLabelListener&&window.removeEventListener("filament-forms::select.refreshSelectedOptionLabel",this.refreshOptionLabelListener),this.searchTimeout&&(clearTimeout(this.searchTimeout),this.searchTimeout=null),this.container&&this.container.remove()}};function P({canOptionLabelsWrap:c,canSelectPlaceholder:t,isHtmlAllowed:e,getOptionLabelUsing:i,getOptionLabelsUsing:s,getOptionsUsing:o,getSearchResultsUsing:n,initialOptionLabel:a,initialOptionLabels:l,initialState:h,isAutofocused:p,isDisabled:f,isMultiple:g,isSearchable:y,hasDynamicOptions:L,hasDynamicSearchResults:O,livewireId:S,loadingMessage:I,maxItems:x,maxItemsMessage:A,noSearchResultsMessage:C,options:v,optionsLimit:w,placeholder:E,searchDebounce:D,searchingMessage:R,searchPrompt:k,searchableOptionFields:M,searchQuery:N,autoSearch:b,state:m,statePath:B}){return{combobox:null,state:m,init(){this.combobox=new T({element:this.$refs.combobox,options:v,placeholder:E,state:this.state,canOptionLabelsWrap:c,canSelectPlaceholder:t,initialOptionLabel:a,initialOptionLabels:l,initialState:h,isHtmlAllowed:e,isAutofocused:p,isDisabled:f,isMultiple:g,isSearchable:y,getOptionLabelUsing:i,getOptionLabelsUsing:s,getOptionsUsing:o,getSearchResultsUsing:n,hasDynamicOptions:L,hasDynamicSearchResults:O,searchPrompt:k,searchDebounce:D,loadingMessage:I,searchingMessage:R,noSearchResultsMessage:C,maxItems:x,maxItemsMessage:A,optionsLimit:w,searchableOptionFields:M,searchQuery:N,autoSearch:b,livewireId:S,statePath:B,onStateChange:u=>{this.state=u}}),this.$watch("state",u=>{this.combobox&&this.combobox.state!==u&&(this.combobox.state=u,this.combobox.updateSelectedDisplay(),this.combobox.renderOptions())})},destroy(){this.combobox&&(this.combobox.destroy(),this.combobox=null)}}}export{P as default}; diff --git a/resources/js/components/combobox.js b/resources/js/components/combobox.js index fb1424b..945917b 100644 --- a/resources/js/components/combobox.js +++ b/resources/js/components/combobox.js @@ -1347,11 +1347,15 @@ class Combobox { if (!this.isMultiple) { this.state = value - this.searchQuery = '' - if (this.searchInput) { - this.searchInput.value = '' + + if (blank(value)) { + this.searchQuery = '' + if (this.searchInput) { + this.searchInput.value = '' + } + this.options = JSON.parse(JSON.stringify(this.originalOptions)) } - this.options = JSON.parse(JSON.stringify(this.originalOptions)) + this.updateSelectedDisplay() this.renderOptions() this.onStateChange(this.state) diff --git a/tests/Browser/ComboboxTest.php b/tests/Browser/ComboboxTest.php index 8058226..9046adb 100644 --- a/tests/Browser/ComboboxTest.php +++ b/tests/Browser/ComboboxTest.php @@ -63,7 +63,9 @@ function comboboxClearButton(string $field): string ->wait(3) ->assertSeeIn(comboboxOptions('category_id'), 'Technology') ->click(comboboxOption('category_id', '1')) - ->assertAttribute(comboboxInput('category_id'), 'placeholder', 'Technology'); + ->assertValue(comboboxInput('category_id'), 'Tech') + ->assertAttribute(comboboxOption('category_id', '1'), 'aria-selected', 'true') + ->assertSeeIn(comboboxOptions('category_id'), 'Technology'); }); // --------------------------------------------------------------------------- @@ -218,6 +220,21 @@ function comboboxClearButton(string $field): string ->assertMissing(comboboxOption('status', 'archived')); }); +it('preserves the search query and filtered options after selecting a static result', function () { + $page = visit('/admin/posts/create'); + + $page->click(comboboxInput('status')) + ->typeSlowly(comboboxInput('status'), 'pub') + ->assertVisible(comboboxOption('status', 'published')) + ->click(comboboxOption('status', 'published')) + ->assertValue(comboboxInput('status'), 'pub') + ->assertAttribute(comboboxOption('status', 'published'), 'aria-selected', 'true') + ->assertVisible(comboboxOption('status', 'published')) + ->assertMissing(comboboxOption('status', 'draft')) + ->assertMissing(comboboxOption('status', 'review')) + ->assertMissing(comboboxOption('status', 'archived')); +}); + // --------------------------------------------------------------------------- // Clear button removes selection // --------------------------------------------------------------------------- diff --git a/tests/BrowserTestCase.php b/tests/BrowserTestCase.php index 0bfd0a3..011473d 100644 --- a/tests/BrowserTestCase.php +++ b/tests/BrowserTestCase.php @@ -20,6 +20,7 @@ use Prvious\Filament\Combobox\ComboboxServiceProvider; use RyanChandler\BladeCaptureDirective\BladeCaptureDirectiveServiceProvider; use Workbench\App\Providers\WorkbenchServiceProvider; +use Workbench\Database\Seeders\DatabaseSeeder; class BrowserTestCase extends Orchestra { @@ -71,6 +72,6 @@ protected function defineDatabaseMigrations(): void protected function defineDatabaseSeeders(): void { - $this->seed(\Workbench\Database\Seeders\DatabaseSeeder::class); + $this->seed(DatabaseSeeder::class); } } diff --git a/workbench/app/Providers/WorkbenchServiceProvider.php b/workbench/app/Providers/WorkbenchServiceProvider.php index 922c8a0..ba68309 100644 --- a/workbench/app/Providers/WorkbenchServiceProvider.php +++ b/workbench/app/Providers/WorkbenchServiceProvider.php @@ -3,12 +3,13 @@ namespace Workbench\App\Providers; use Illuminate\Support\ServiceProvider; +use Workbench\App\Providers\Filament\AdminPanelProvider; class WorkbenchServiceProvider extends ServiceProvider { public function register(): void { - $this->app->register(\Workbench\App\Providers\Filament\AdminPanelProvider::class); + $this->app->register(AdminPanelProvider::class); } public function boot(): void diff --git a/workbench/database/factories/UserFactory.php b/workbench/database/factories/UserFactory.php index 5920864..f97b963 100644 --- a/workbench/database/factories/UserFactory.php +++ b/workbench/database/factories/UserFactory.php @@ -8,7 +8,7 @@ use Workbench\App\Models\User; /** - * @extends \Illuminate\Database\Eloquent\Factories\Factory<\Workbench\App\Models\User> + * @extends Factory */ class UserFactory extends Factory {