@ably/ui 15.6.0 → 16.0.0-dev.937d7376

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.
Files changed (76) hide show
  1. package/core/Flyout.js +1 -1
  2. package/core/Flyout.js.map +1 -1
  3. package/core/Header.js +1 -1
  4. package/core/Header.js.map +1 -1
  5. package/core/LegacyMeganav/MeganavBlogPostsList/component.js +2 -0
  6. package/core/LegacyMeganav/MeganavBlogPostsList/component.js.map +1 -0
  7. package/core/LegacyMeganav/MeganavControl/component.js +2 -0
  8. package/core/LegacyMeganav/MeganavControl/component.js.map +1 -0
  9. package/core/LegacyMeganav/MeganavControlMobileDropdown/component.js +2 -0
  10. package/core/LegacyMeganav/MeganavControlMobileDropdown/component.js.map +1 -0
  11. package/core/LegacyMeganav/MeganavControlMobilePanelClose/component.js +2 -0
  12. package/core/LegacyMeganav/MeganavControlMobilePanelClose/component.js.map +1 -0
  13. package/core/LegacyMeganav/MeganavControlMobilePanelOpen/component.js +2 -0
  14. package/core/LegacyMeganav/MeganavControlMobilePanelOpen/component.js.map +1 -0
  15. package/core/LegacyMeganav/MeganavSearchAutocomplete/component.js +2 -0
  16. package/core/LegacyMeganav/MeganavSearchAutocomplete/component.js.map +1 -0
  17. package/core/LegacyMeganav/MeganavSearchSuggestions/component.js +2 -0
  18. package/core/LegacyMeganav/MeganavSearchSuggestions/component.js.map +1 -0
  19. package/core/LegacyMeganav/component.js +2 -0
  20. package/core/{Meganav → LegacyMeganav}/component.js.map +1 -1
  21. package/core/LegacyMeganav.js +2 -0
  22. package/core/LegacyMeganav.js.map +1 -0
  23. package/core/Meganav/.DS_Store +0 -0
  24. package/core/Meganav/Meganav.js +2 -0
  25. package/core/Meganav/Meganav.js.map +1 -0
  26. package/core/Meganav/MeganavMobile.js +2 -0
  27. package/core/Meganav/MeganavMobile.js.map +1 -0
  28. package/core/Meganav/MeganavPanel.js +2 -0
  29. package/core/Meganav/MeganavPanel.js.map +1 -0
  30. package/core/Meganav/data.js +2 -0
  31. package/core/Meganav/data.js.map +1 -0
  32. package/core/Meganav/images/fan-engagement-nav-image.png +0 -0
  33. package/core/Meganav/images/founders-nav-image.png +0 -0
  34. package/core/MeganavBlogPostsList.js.map +1 -1
  35. package/core/MeganavContentCompany.js.map +1 -1
  36. package/core/MeganavContentDevelopers.js.map +1 -1
  37. package/core/MeganavContentProducts.js.map +1 -1
  38. package/core/MeganavContentUseCases.js.map +1 -1
  39. package/core/MeganavControl.js.map +1 -1
  40. package/core/MeganavControlMobileDropdown.js.map +1 -1
  41. package/core/MeganavItemsDesktop.js +1 -1
  42. package/core/MeganavItemsDesktop.js.map +1 -1
  43. package/core/MeganavItemsMobile.js +1 -1
  44. package/core/MeganavItemsMobile.js.map +1 -1
  45. package/core/MeganavItemsSignedIn.js.map +1 -1
  46. package/core/MeganavSearch.js.map +1 -1
  47. package/core/MeganavSearchPanel.js.map +1 -1
  48. package/core/MeganavSearchSuggestions.js.map +1 -1
  49. package/core/Notice/component.js +1 -1
  50. package/core/Notice/component.js.map +1 -1
  51. package/core/SignOutLink.js.map +1 -1
  52. package/core/images/award/g2-best-meets-requirements-2025.png +0 -0
  53. package/core/images/award/g2-best-support-2025.png +0 -0
  54. package/core/images/award/g2-high-performer-2025.png +0 -0
  55. package/core/images/award/g2-users-most-likely-to-recommend-2025.png +0 -0
  56. package/index.d.ts +193 -109
  57. package/package.json +9 -11
  58. package/core/Meganav/component.js +0 -2
  59. package/core/Meganav.js +0 -2
  60. package/core/Meganav.js.map +0 -1
  61. package/core/MeganavBlogPostsList/component.js +0 -2
  62. package/core/MeganavBlogPostsList/component.js.map +0 -1
  63. package/core/MeganavControl/component.js +0 -2
  64. package/core/MeganavControl/component.js.map +0 -1
  65. package/core/MeganavControlMobileDropdown/component.js +0 -2
  66. package/core/MeganavControlMobileDropdown/component.js.map +0 -1
  67. package/core/MeganavControlMobilePanelClose/component.js +0 -2
  68. package/core/MeganavControlMobilePanelClose/component.js.map +0 -1
  69. package/core/MeganavControlMobilePanelOpen/component.js +0 -2
  70. package/core/MeganavControlMobilePanelOpen/component.js.map +0 -1
  71. package/core/MeganavSearchAutocomplete/component.js +0 -2
  72. package/core/MeganavSearchAutocomplete/component.js.map +0 -1
  73. package/core/MeganavSearchSuggestions/component.js +0 -2
  74. package/core/MeganavSearchSuggestions/component.js.map +0 -1
  75. /package/core/{Meganav → LegacyMeganav}/component.css +0 -0
  76. /package/core/{Meganav → LegacyMeganav}/component.json +0 -0
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/core/MeganavControlMobilePanelOpen/component.js"],"sourcesContent":["import { queryId, queryIdAll } from \"../dom-query\";\nimport { remsToPixelValue } from \"../css\";\n\nexport default () => {\n const closeControls = Array.from(\n queryIdAll(\"meganav-control-mobile-panel-close\"),\n );\n const openControls = Array.from(\n queryIdAll(\"meganav-control-mobile-panel-open\"),\n );\n const dropdown = queryId(\"meganav-mobile-dropdown\");\n\n // Height is defined in rem's so to get the pixel value we need to find the fontSize on root\n const meganavHeight = remsToPixelValue(\n getComputedStyle(document.documentElement).getPropertyValue(\n \"--ui-meganav-height\",\n ),\n );\n\n const clickHandler = (btn, closeBtn, panel) => () => {\n btn.setAttribute(\"aria-expanded\", true);\n closeBtn.setAttribute(\"aria-expanded\", true);\n panel.classList.replace(\"hidden\", \"block\");\n\n // On devices where we don't have enough space for the panel, set it's height to\n // the height of the viewport (minus the meganav height) - this will trigger a scroll.\n // Otherwise just set it to the panel height. This handles the case where the ratio of vertical\n // space to horizontal is especially high (think tablets, but not only).\n panel.style.height = `${\n window.innerHeight - meganavHeight > panel.offsetHeight\n ? panel.offsetHeight\n : window.innerHeight - meganavHeight\n }px`;\n };\n\n return openControls.map((btn) => {\n const closeBtn = closeControls.find(\n (node) =>\n node.getAttribute(\"aria-controls\") ===\n btn.getAttribute(\"aria-controls\"),\n );\n const panel = document.querySelector(\n `#${btn.getAttribute(\"aria-controls\")}`,\n );\n const handler = clickHandler(btn, closeBtn, panel);\n\n btn.addEventListener(\"click\", handler);\n\n return {\n teardown: () => btn.removeEventListener(\"click\", handler),\n clear: () => {\n panel.classList.replace(\"block\", \"hidden\");\n dropdown.classList.remove(\"ui-meganav-mobile-dropdown-expand\");\n btn.setAttribute(\"aria-expanded\", false);\n panel.style.height = null;\n },\n };\n });\n};\n"],"names":["queryId","queryIdAll","remsToPixelValue","closeControls","Array","from","openControls","dropdown","meganavHeight","getComputedStyle","document","documentElement","getPropertyValue","clickHandler","btn","closeBtn","panel","setAttribute","classList","replace","style","height","window","innerHeight","offsetHeight","map","find","node","getAttribute","querySelector","handler","addEventListener","teardown","removeEventListener","clear","remove"],"mappings":"AAAA,OAASA,OAAO,CAAEC,UAAU,KAAQ,cAAe,AACnD,QAASC,gBAAgB,KAAQ,QAAS,AAE1C,eAAe,CAAA,KACb,MAAMC,cAAgBC,MAAMC,IAAI,CAC9BJ,WAAW,uCAEb,MAAMK,aAAeF,MAAMC,IAAI,CAC7BJ,WAAW,sCAEb,MAAMM,SAAWP,QAAQ,2BAGzB,MAAMQ,cAAgBN,iBACpBO,iBAAiBC,SAASC,eAAe,EAAEC,gBAAgB,CACzD,wBAIJ,MAAMC,aAAe,CAACC,IAAKC,SAAUC,QAAU,KAC7CF,IAAIG,YAAY,CAAC,gBAAiB,MAClCF,SAASE,YAAY,CAAC,gBAAiB,MACvCD,MAAME,SAAS,CAACC,OAAO,CAAC,SAAU,QAMlCH,CAAAA,MAAMI,KAAK,CAACC,MAAM,CAAG,CAAC,EACpBC,OAAOC,WAAW,CAAGf,cAAgBQ,MAAMQ,YAAY,CACnDR,MAAMQ,YAAY,CAClBF,OAAOC,WAAW,CAAGf,cAC1B,EAAE,CAAC,AACN,EAEA,OAAOF,aAAamB,GAAG,CAAC,AAACX,MACvB,MAAMC,SAAWZ,cAAcuB,IAAI,CACjC,AAACC,MACCA,KAAKC,YAAY,CAAC,mBAClBd,IAAIc,YAAY,CAAC,kBAErB,MAAMZ,MAAQN,SAASmB,aAAa,CAClC,CAAC,CAAC,EAAEf,IAAIc,YAAY,CAAC,iBAAiB,CAAC,EAEzC,MAAME,QAAUjB,aAAaC,IAAKC,SAAUC,OAE5CF,IAAIiB,gBAAgB,CAAC,QAASD,SAE9B,MAAO,CACLE,SAAU,IAAMlB,IAAImB,mBAAmB,CAAC,QAASH,SACjDI,MAAO,KACLlB,MAAME,SAAS,CAACC,OAAO,CAAC,QAAS,UACjCZ,SAASW,SAAS,CAACiB,MAAM,CAAC,qCAC1BrB,IAAIG,YAAY,CAAC,gBAAiB,MAClCD,CAAAA,MAAMI,KAAK,CAACC,MAAM,CAAG,IACvB,CACF,CACF,EACF,CAAA,CAAE"}
@@ -1,2 +0,0 @@
1
- import{queryId}from"../dom-query";import AddSearchClient from"addsearch-js-client";const init=({input,container,listContainer,clear,client})=>{client.setAnalyticsTag("Meganav autocomplete");client.setThrottleTime(400);const clearResults=()=>{container.classList.add("hidden");listContainer.innerHTML=""};const toggleClearBtn=query=>{if((query||"").length>0&&clear){clear.classList.remove("invisible")}else if(clear){clear.classList.add("invisible")}};const markQueryInSuggestion=(suggestionValue,query)=>{return suggestionValue.replace(query.toLowerCase(),`<span class="font-light">${query}</span>`)};const navigateToUrl=q=>window.location=`/search?q=${q}`;const focusNext=index=>{const nextSuggestion=listContainer.querySelector(`[data-suggestion-index="${index+1}"]`);if(!nextSuggestion)return;nextSuggestion.focus()};const focusPrevious=index=>{const previousIndex=index-1;const previousSuggestion=listContainer.querySelector(`[data-suggestion-index="${previousIndex}"]`);if(!previousSuggestion)return;previousSuggestion.focus()};const renderResults=query=>(results={})=>{toggleClearBtn(query);if(!Array.isArray(results.suggestions)){clearResults();return}if(results.suggestions.length===0){clearResults();return}const items=results.suggestions.map((suggestion,index)=>{const li=document.createElement("li");const button=document.createElement("button");button.type="button";button.classList.add("ui-text-menu2","font-medium","p-8","w-full","text-left","rounded","hover:text-gui-hover","focus:outline-gui-focus","hover:bg-light-grey");button.innerHTML=markQueryInSuggestion(suggestion.value,query);button.dataset.suggestionIndex=index;button.addEventListener("click",()=>{navigateToUrl(suggestion.value)});button.addEventListener("keydown",e=>{const key=e.key;if(key==="ArrowDown"){focusNext(index)}else if(key==="ArrowUp"&&index-1<0){input.focus()}else if(key==="ArrowUp"&&index-1>=0){focusPrevious(index)}else if(key==="Enter"||key==="Space"){navigateToUrl(suggestion.value)}});li.appendChild(button);return li});listContainer.innerHTML="";items.forEach(item=>listContainer.appendChild(item));container.classList.remove("hidden")};const keyupHandler=e=>{const query=e.target.value;const key=e.key;if(key==="ArrowDown"){focusNext(0);return}if(!query){clearResults()}else{client.suggestions(query,renderResults(query))}};let clearHandler;if(clear){clearHandler=()=>{input.value="";clear.classList.add("invisible");clearResults()};clear.addEventListener("click",clearHandler)}input.addEventListener("keyup",keyupHandler);return{teardown:()=>{input.removeEventListener("keyup",keyupHandler);if(clear)clear.removeEventListener("click",clearHandler)},clear:()=>{input.value="";clearResults()}}};export default(apiKey=>{if(!apiKey){console.log(`No AddSearch API key provided, skipping search suggestions.`);return[]}const client=new AddSearchClient(apiKey);return[queryId("meganav-search-input"),queryId("meganav-mobile-search-input")].filter(i=>i).map(input=>{const parent=input.parentNode;const container=queryId("meganav-search-autocomplete-container",parent);const listContainer=queryId("meganav-search-autocomplete-list",parent);const clear=queryId("meganav-search-input-clear",parent);return init({input,container,listContainer,client,clear})})});
2
- //# sourceMappingURL=component.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/core/MeganavSearchAutocomplete/component.js"],"sourcesContent":["import { queryId } from \"../dom-query\";\nimport AddSearchClient from \"addsearch-js-client\";\n\nconst init = ({ input, container, listContainer, clear, client }) => {\n client.setAnalyticsTag(\"Meganav autocomplete\");\n client.setThrottleTime(400);\n\n const clearResults = () => {\n container.classList.add(\"hidden\");\n listContainer.innerHTML = \"\";\n };\n\n const toggleClearBtn = (query) => {\n if ((query || \"\").length > 0 && clear) {\n clear.classList.remove(\"invisible\");\n } else if (clear) {\n clear.classList.add(\"invisible\");\n }\n };\n\n const markQueryInSuggestion = (suggestionValue, query) => {\n return suggestionValue.replace(\n query.toLowerCase(),\n `<span class=\"font-light\">${query}</span>`,\n );\n };\n\n const navigateToUrl = (q) => (window.location = `/search?q=${q}`);\n\n const focusNext = (index) => {\n const nextSuggestion = listContainer.querySelector(\n `[data-suggestion-index=\"${index + 1}\"]`,\n );\n if (!nextSuggestion) return;\n nextSuggestion.focus();\n };\n\n const focusPrevious = (index) => {\n const previousIndex = index - 1;\n\n const previousSuggestion = listContainer.querySelector(\n `[data-suggestion-index=\"${previousIndex}\"]`,\n );\n if (!previousSuggestion) return;\n previousSuggestion.focus();\n };\n\n const renderResults =\n (query) =>\n (results = {}) => {\n toggleClearBtn(query);\n\n // Prevent invalid access error when key is invalid\n if (!Array.isArray(results.suggestions)) {\n clearResults();\n return;\n }\n\n // Prevent key error from invalid key\n if (results.suggestions.length === 0) {\n clearResults();\n return;\n }\n\n const items = results.suggestions.map((suggestion, index) => {\n const li = document.createElement(\"li\");\n const button = document.createElement(\"button\");\n button.type = \"button\";\n\n button.classList.add(\n \"ui-text-menu2\",\n \"font-medium\",\n \"p-8\",\n \"w-full\",\n \"text-left\",\n \"rounded\",\n \"hover:text-gui-hover\",\n \"focus:outline-gui-focus\",\n \"hover:bg-light-grey\",\n );\n\n button.innerHTML = markQueryInSuggestion(suggestion.value, query);\n\n button.dataset.suggestionIndex = index;\n\n button.addEventListener(\"click\", () => {\n navigateToUrl(suggestion.value);\n });\n\n button.addEventListener(\"keydown\", (e) => {\n const key = e.key;\n\n if (key === \"ArrowDown\") {\n focusNext(index);\n } else if (key === \"ArrowUp\" && index - 1 < 0) {\n input.focus();\n } else if (key === \"ArrowUp\" && index - 1 >= 0) {\n focusPrevious(index);\n } else if (key === \"Enter\" || key === \"Space\") {\n navigateToUrl(suggestion.value);\n }\n });\n\n li.appendChild(button);\n return li;\n });\n\n listContainer.innerHTML = \"\";\n items.forEach((item) => listContainer.appendChild(item));\n container.classList.remove(\"hidden\");\n };\n\n const keyupHandler = (e) => {\n const query = e.target.value;\n const key = e.key;\n\n if (key === \"ArrowDown\") {\n focusNext(0);\n return;\n }\n\n if (!query) {\n clearResults();\n } else {\n client.suggestions(query, renderResults(query));\n }\n };\n\n let clearHandler;\n if (clear) {\n clearHandler = () => {\n input.value = \"\";\n clear.classList.add(\"invisible\");\n clearResults();\n };\n clear.addEventListener(\"click\", clearHandler);\n }\n\n input.addEventListener(\"keyup\", keyupHandler);\n\n return {\n teardown: () => {\n input.removeEventListener(\"keyup\", keyupHandler);\n if (clear) clear.removeEventListener(\"click\", clearHandler);\n },\n clear: () => {\n input.value = \"\";\n clearResults();\n },\n };\n};\n\nexport default (apiKey) => {\n if (!apiKey) {\n console.log(`No AddSearch API key provided, skipping search suggestions.`);\n return [];\n }\n\n const client = new AddSearchClient(apiKey);\n\n return [\n queryId(\"meganav-search-input\"),\n queryId(\"meganav-mobile-search-input\"),\n ]\n .filter((i) => i)\n .map((input) => {\n const parent = input.parentNode;\n const container = queryId(\n \"meganav-search-autocomplete-container\",\n parent,\n );\n const listContainer = queryId(\"meganav-search-autocomplete-list\", parent);\n const clear = queryId(\"meganav-search-input-clear\", parent);\n\n return init({ input, container, listContainer, client, clear });\n });\n};\n"],"names":["queryId","AddSearchClient","init","input","container","listContainer","clear","client","setAnalyticsTag","setThrottleTime","clearResults","classList","add","innerHTML","toggleClearBtn","query","length","remove","markQueryInSuggestion","suggestionValue","replace","toLowerCase","navigateToUrl","q","window","location","focusNext","index","nextSuggestion","querySelector","focus","focusPrevious","previousIndex","previousSuggestion","renderResults","results","Array","isArray","suggestions","items","map","suggestion","li","document","createElement","button","type","value","dataset","suggestionIndex","addEventListener","e","key","appendChild","forEach","item","keyupHandler","target","clearHandler","teardown","removeEventListener","apiKey","console","log","filter","i","parent","parentNode"],"mappings":"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"}
@@ -1,2 +0,0 @@
1
- import{queryId}from"../dom-query";const DRAG_BUFFER=5;const getTranslateX=node=>new DOMMatrix(window.getComputedStyle(node).transform).e;const updateTranslateX=(node,value)=>node.style.transform=`translateX(${value}px)`;const dragLeftBoundary=(translateX,threshold)=>translateX>=threshold;const dragRightBoundary=(translateX,itemsWidth,windowWidth,threshold)=>Math.abs(translateX-windowWidth+threshold)>itemsWidth;const getDistance=(e,touchStartX)=>e.changedTouches[0]?.clientX-touchStartX;const withinBuffer=distance=>Math.abs(distance)<DRAG_BUFFER;const getItemsTotalWidth=nodes=>nodes.map(item=>item.getBoundingClientRect().width).reduce((acc,val)=>acc+val,0);const MeganavSearchSuggestions=()=>{const suggestionsToggle=queryId("meganav-mobile-search-input");const suggestions=queryId("meganav-mobile-search-suggestions");const list=suggestions.querySelector("ul");const listItems=Array.from(list.querySelectorAll("li"));const dragLeft=(distance,threshold)=>{const currentTranslateX=getTranslateX(list);const translateX=Math.round(currentTranslateX+distance);if(dragLeftBoundary(translateX,threshold))return;updateTranslateX(list,translateX)};const dragLeftEnd=(distance,threshold)=>{const currentTranslateX=getTranslateX(list);let translateX=Math.round(currentTranslateX+distance);if(dragLeftBoundary(translateX,threshold)){translateX=0}updateTranslateX(list,translateX)};const dragRight=(distance,threshold)=>{const listWidth=list.getBoundingClientRect().width;const currentTranslateX=getTranslateX(list);const translateX=Math.round(currentTranslateX+distance);const itemsTotalWidth=getItemsTotalWidth(listItems);if(dragRightBoundary(translateX,itemsTotalWidth,listWidth,threshold)){return}updateTranslateX(list,translateX)};const dragRightEnd=(distance,threshold)=>{const listWidth=list.getBoundingClientRect().width;const currentTranslateX=getTranslateX(list);const itemsTotalWidth=getItemsTotalWidth(listItems);let translateX=Math.round(currentTranslateX+distance);if(dragRightBoundary(translateX,itemsTotalWidth,listWidth,threshold)){translateX=-(itemsTotalWidth-listWidth+threshold)}updateTranslateX(list,translateX)};let touchStartX;const touchstartHandler=e=>{touchStartX=e.touches[0]?.clientX};const touchmoveHandler=e=>{const distance=getDistance(e,touchStartX);if(withinBuffer(distance))return;distance>0?dragLeft(distance,24):dragRight(distance,96)};const touchendHandler=e=>{const distance=getDistance(e,touchStartX);if(withinBuffer(distance))return;distance>0?dragLeftEnd(distance,24):dragRightEnd(distance,48)};const focusSuggestionsHandler=()=>{suggestions.classList.add("max-h-96")};const blurSuggestionsHandler=e=>{if(e.relatedTarget===suggestions.querySelectorAll("a")[0]){return}suggestions.classList.remove("max-h-96")};const wheelHandler=e=>{const distance=e.deltaY*4;if(withinBuffer(distance))return;distance>0?dragLeftEnd(distance,24):dragRightEnd(distance,48)};suggestionsToggle?.addEventListener("focus",focusSuggestionsHandler);suggestionsToggle?.addEventListener("blur",blurSuggestionsHandler);suggestions.addEventListener("touchstart",touchstartHandler);suggestions.addEventListener("touchmove",touchmoveHandler);suggestions.addEventListener("touchend",touchendHandler);suggestions.addEventListener("wheel",wheelHandler);return{teardown:()=>{suggestionsToggle?.removeEventListener("focus",focusSuggestionsHandler);suggestionsToggle?.removeEventListener("blur",blurSuggestionsHandler);suggestions.removeEventListener("touchstart",touchstartHandler);suggestions.removeEventListener("touchmove",touchmoveHandler);suggestions.removeEventListener("touchend",touchendHandler)},clear:()=>{suggestions.classList.remove("max-h-96");list.style.transform=`translateX(0px)`}}};export default MeganavSearchSuggestions;
2
- //# sourceMappingURL=component.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/core/MeganavSearchSuggestions/component.js"],"sourcesContent":["import { queryId } from \"../dom-query\";\n\nconst DRAG_BUFFER = 5;\n\nconst getTranslateX = (node) =>\n new DOMMatrix(window.getComputedStyle(node).transform).e;\n\nconst updateTranslateX = (node, value) =>\n (node.style.transform = `translateX(${value}px)`);\n\nconst dragLeftBoundary = (translateX, threshold) => translateX >= threshold;\n\nconst dragRightBoundary = (translateX, itemsWidth, windowWidth, threshold) =>\n Math.abs(translateX - windowWidth + threshold) > itemsWidth;\n\nconst getDistance = (e, touchStartX) =>\n e.changedTouches[0]?.clientX - touchStartX;\n\nconst withinBuffer = (distance) => Math.abs(distance) < DRAG_BUFFER;\n\nconst getItemsTotalWidth = (nodes) =>\n nodes\n .map((item) => item.getBoundingClientRect().width)\n .reduce((acc, val) => acc + val, 0);\n\nconst MeganavSearchSuggestions = () => {\n const suggestionsToggle = queryId(\"meganav-mobile-search-input\");\n const suggestions = queryId(\"meganav-mobile-search-suggestions\");\n const list = suggestions.querySelector(\"ul\");\n const listItems = Array.from(list.querySelectorAll(\"li\"));\n\n const dragLeft = (distance, threshold) => {\n const currentTranslateX = getTranslateX(list);\n const translateX = Math.round(currentTranslateX + distance);\n if (dragLeftBoundary(translateX, threshold)) return;\n updateTranslateX(list, translateX);\n };\n\n const dragLeftEnd = (distance, threshold) => {\n const currentTranslateX = getTranslateX(list);\n let translateX = Math.round(currentTranslateX + distance);\n\n if (dragLeftBoundary(translateX, threshold)) {\n translateX = 0;\n }\n\n updateTranslateX(list, translateX);\n };\n\n const dragRight = (distance, threshold) => {\n const listWidth = list.getBoundingClientRect().width;\n const currentTranslateX = getTranslateX(list);\n const translateX = Math.round(currentTranslateX + distance);\n const itemsTotalWidth = getItemsTotalWidth(listItems);\n\n if (dragRightBoundary(translateX, itemsTotalWidth, listWidth, threshold)) {\n return;\n }\n\n updateTranslateX(list, translateX);\n };\n\n const dragRightEnd = (distance, threshold) => {\n const listWidth = list.getBoundingClientRect().width;\n const currentTranslateX = getTranslateX(list);\n const itemsTotalWidth = getItemsTotalWidth(listItems);\n let translateX = Math.round(currentTranslateX + distance);\n\n if (dragRightBoundary(translateX, itemsTotalWidth, listWidth, threshold)) {\n translateX = -(itemsTotalWidth - listWidth + threshold);\n }\n\n updateTranslateX(list, translateX);\n };\n\n let touchStartX;\n\n const touchstartHandler = (e) => {\n touchStartX = e.touches[0]?.clientX;\n };\n\n const touchmoveHandler = (e) => {\n const distance = getDistance(e, touchStartX);\n if (withinBuffer(distance)) return;\n distance > 0 ? dragLeft(distance, 24) : dragRight(distance, 96);\n };\n\n const touchendHandler = (e) => {\n const distance = getDistance(e, touchStartX);\n if (withinBuffer(distance)) return;\n distance > 0 ? dragLeftEnd(distance, 24) : dragRightEnd(distance, 48);\n };\n\n const focusSuggestionsHandler = () => {\n suggestions.classList.add(\"max-h-96\");\n };\n\n const blurSuggestionsHandler = (e) => {\n if (e.relatedTarget === suggestions.querySelectorAll(\"a\")[0]) {\n return;\n }\n suggestions.classList.remove(\"max-h-96\");\n };\n\n const wheelHandler = (e) => {\n const distance = e.deltaY * 4;\n if (withinBuffer(distance)) return;\n distance > 0 ? dragLeftEnd(distance, 24) : dragRightEnd(distance, 48);\n };\n\n suggestionsToggle?.addEventListener(\"focus\", focusSuggestionsHandler);\n suggestionsToggle?.addEventListener(\"blur\", blurSuggestionsHandler);\n suggestions.addEventListener(\"touchstart\", touchstartHandler);\n suggestions.addEventListener(\"touchmove\", touchmoveHandler);\n suggestions.addEventListener(\"touchend\", touchendHandler);\n suggestions.addEventListener(\"wheel\", wheelHandler);\n\n return {\n teardown: () => {\n suggestionsToggle?.removeEventListener(\"focus\", focusSuggestionsHandler);\n suggestionsToggle?.removeEventListener(\"blur\", blurSuggestionsHandler);\n suggestions.removeEventListener(\"touchstart\", touchstartHandler);\n suggestions.removeEventListener(\"touchmove\", touchmoveHandler);\n suggestions.removeEventListener(\"touchend\", touchendHandler);\n },\n clear: () => {\n suggestions.classList.remove(\"max-h-96\");\n list.style.transform = `translateX(0px)`;\n },\n };\n};\n\nexport default MeganavSearchSuggestions;\n"],"names":["queryId","DRAG_BUFFER","getTranslateX","node","DOMMatrix","window","getComputedStyle","transform","e","updateTranslateX","value","style","dragLeftBoundary","translateX","threshold","dragRightBoundary","itemsWidth","windowWidth","Math","abs","getDistance","touchStartX","changedTouches","clientX","withinBuffer","distance","getItemsTotalWidth","nodes","map","item","getBoundingClientRect","width","reduce","acc","val","MeganavSearchSuggestions","suggestionsToggle","suggestions","list","querySelector","listItems","Array","from","querySelectorAll","dragLeft","currentTranslateX","round","dragLeftEnd","dragRight","listWidth","itemsTotalWidth","dragRightEnd","touchstartHandler","touches","touchmoveHandler","touchendHandler","focusSuggestionsHandler","classList","add","blurSuggestionsHandler","relatedTarget","remove","wheelHandler","deltaY","addEventListener","teardown","removeEventListener","clear"],"mappings":"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"}
File without changes
File without changes