Version 1.16.6 (#1860)

### Fixes
- Address and resolve vulnerabilities (#1855)
- Change search bar icons used within button component from divs to spans (#1857)

THIRD-PARTY-NOTICES

@@ -487,7 +487,7 @@ CDN
 
 The following NPM package may be included in this product:
 
- - @yext/search-core@2.4.0
+ - @yext/search-core@2.5.1
 
 This package contains the following license and notice below:
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yext/answers-search-ui",
-  "version": "1.16.5",
+  "version": "1.16.6",
   "description": "Javascript Search Programming Interface",
   "main": "dist/answers-umd.js",
   "repository": {
@@ -30,7 +30,7 @@
     "@mapbox/mapbox-gl-language": "^0.10.1",
     "@yext/answers-storage": "^1.1.0",
     "@yext/rtf-converter": "^1.7.1",
-    "@yext/search-core": "^2.4.0",
+    "@yext/search-core": "^2.5.1",
     "bowser": "^2.11.0",
     "cross-fetch": "^3.1.5",
     "css-vars-ponyfill": "^2.4.3",

src/ui/components/filters/filteroptionscomponent.js

@@ -448,21 +448,21 @@ export default class FilterOptionsComponent extends Component {
             if (!filter) {
               filterOption.classList.remove('hiddenSearch');
               filterOption.classList.remove('displaySearch');
-              labelEl.innerHTML = labelText;
+              labelEl.textContent = labelText;
             } else {
               const matchedSubstring = this._getMatchedSubstring(
                 labelText.toLowerCase(), filter.toLowerCase());
               if (matchedSubstring) {
                 filterOption.classList.add('displaySearch');
                 filterOption.classList.remove('hiddenSearch');
-                labelEl.innerHTML = new HighlightedValue({
+                labelEl.textContent = new HighlightedValue({
                   value: labelText,
                   matchedSubstrings: [matchedSubstring]
                 }).get();
               } else {
                 filterOption.classList.add('hiddenSearch');
                 filterOption.classList.remove('displaySearch');
-                labelEl.innerHTML = labelText;
+                labelEl.textContent = labelText;
               }
             }
           }

src/ui/sass/modules/_SearchBar.scss

@@ -280,13 +280,18 @@ $searchbar-button-text-color-active: var(--yxt-searchbar-button-text-color-base)
 
   &-buttonImage .Icon svg, .Icon-image
   {
+    display: block;
     width: 2em;
     height: 2em;
   }
 
   &-instructions {
     display: none;
   }
+
+  &-CustomLoadingImage {
+    display: block;
+  }
 }
 
 // If custom icons are supplied, the SVGs simply alternate opacity

src/ui/templates/icons/builtInIcon.hbs

@@ -1,3 +1,3 @@
-<div class="Icon Icon--{{iconName}} {{classNames}}" aria-hidden="true">
+<span class="Icon Icon--{{iconName}} {{classNames}}" aria-hidden="true">
   {{icon iconName complexContentsParams}}
-</div>
+</span>

src/ui/templates/icons/icon.hbs

@@ -1,7 +1,7 @@
-<div class="Icon Icon--{{name}} {{classNames}}" aria-hidden="true">
+<span class="Icon Icon--{{name}} {{classNames}}" aria-hidden="true">
   {{#if iconUrl}}
     <img src="{{iconUrl}}" alt="" class="Icon-image">
   {{else}}
     {{icon iconName complexContentsParams}}
   {{/if}}
-</div>
+</span>

src/ui/templates/icons/iconPartial.hbs

@@ -1,7 +1,7 @@
-<div class="Icon Icon--{{#if iconName}}{{iconName}}{{else}}custom{{/if}} {{classNames}}" aria-hidden="true">
+<span class="Icon Icon--{{#if iconName}}{{iconName}}{{else}}custom{{/if}} {{classNames}}" aria-hidden="true">
   {{#if iconUrl}}
     <img src="{{iconUrl}}" alt="" class="Icon-image">
   {{else}}
     {{icon iconName complexContentsParams}}
   {{/if}}
-</div>
+</span>

src/ui/templates/icons/searchBarIcon.hbs

@@ -1,41 +1,41 @@
 {{#if showLoadingIndicator}}
   {{#if customLoadingIconUrl}}
-    <div class="yxt-SearchBar-CustomLoadingImage js-yxt-SearchBar-LoadingIndicator js-yxt-SearchBar-Icon yxt-SearchBar-Icon--inactive">
+    <span class="yxt-SearchBar-CustomLoadingImage js-yxt-SearchBar-LoadingIndicator js-yxt-SearchBar-Icon yxt-SearchBar-Icon--inactive">
       {{> icons/iconPartial iconUrl=customLoadingIconUrl}}
-    </div>
+    </span>
   {{else}}
-    <div class="yxt-SearchBar-AnimatedIcon js-yxt-SearchBar-LoadingIndicator yxt-SearchBar-LoadingIndicator js-yxt-SearchBar-Icon 
+    <span class="yxt-SearchBar-AnimatedIcon js-yxt-SearchBar-LoadingIndicator yxt-SearchBar-LoadingIndicator js-yxt-SearchBar-Icon 
       yxt-SearchBar-Icon--inactive Icon--lg">
       <svg class= "yxt-SearchBar-LoadingIndicator-AnimatedIcon" viewBox="0 0 72 72">
         <circle class="yxt-SearchBar-LoadingIndicator-Circle" cx="36" cy="36" r="33" stroke="black" stroke-width="3" fill="none"/>
       </svg>
-    </div>
+    </span>
   {{/if}}
 {{/if}}
 
 {{#if submitIcon}}
-  <div class="yxt-SearchBar-buttonImage js-yxt-SearchBar-buttonImage js-yxt-SearchBar-Icon">
+  <span class="yxt-SearchBar-buttonImage js-yxt-SearchBar-buttonImage js-yxt-SearchBar-Icon">
     {{> icons/builtInIcon iconName=submitIcon}}
-  </div>
+  </span>
 {{else if _config.customIconUrl}}
-  <div class="yxt-SearchBar-buttonImage js-yxt-SearchBar-buttonImage js-yxt-SearchBar-Icon">
+  <span class="yxt-SearchBar-buttonImage js-yxt-SearchBar-buttonImage js-yxt-SearchBar-Icon">
     {{> icons/iconPartial iconUrl=_config.customIconUrl}}
-  </div>
+  </span>
 {{else}}
-  <div class="yxt-SearchBar-AnimatedIcon js-yxt-AnimatedForward js-yxt-SearchBar-Icon
+  <span class="yxt-SearchBar-AnimatedIcon js-yxt-AnimatedForward js-yxt-SearchBar-Icon
     {{#unless autoFocus}} yxt-SearchBar-Icon--inactive{{/unless}}">
     {{> icons/builtInIcon
       iconName='yext_animated_forward'
       classNames='yxt-SearchBar-MagnifyingGlass--static Icon--lg'
       complexContentsParams=forwardIconOpts.complexContentsParams
     }}
-  </div>
-  <div class="yxt-SearchBar-AnimatedIcon js-yxt-AnimatedReverse js-yxt-SearchBar-Icon
+  </span>
+  <span class="yxt-SearchBar-AnimatedIcon js-yxt-AnimatedReverse js-yxt-SearchBar-Icon
     {{#if autoFocus}} yxt-SearchBar-Icon--inactive{{/if}}">
     {{> icons/builtInIcon
       iconName='yext_animated_reverse'
       classNames='yxt-SearchBar-Yext--static Icon--lg'
       complexContentsParams=forwardIconOpts.complexContentsParams
     }}
-  </div>
+  </span>
 {{/if}}

src/ui/templates/icons/voiceSearchIcon.hbs

@@ -14,4 +14,4 @@
     {{/if}}
   </div>
   <span class="yxt-SearchBar-voiceSearchText sr-only"></span>
-</div>
+</div>

tests/setup/enzymeadapter.js

@@ -110,7 +110,16 @@ export default class AnswersAdapter extends EnzymeAdapter {
           composed: args.composed,
           cancelable: args.cancelable
         });
-        Object.assign(event, args);
+
+        if (Array.isArray(...args)) {
+          for (const arg in args) {
+            if (arg && arg.target) {
+              Object.defineProperty(event, 'target', { value: arg.target });
+            }
+          }
+        } else {
+          Object.defineProperty(event, 'target', { value: args[0].target });
+        }
 
         node.instance.dispatchEvent(event);
       }

tests/ui/components/filters/filteroptionscomponent.js

@@ -116,6 +116,48 @@ describe('filter options component', () => {
     expect(wrapper.find('.js-yxt-FilterOptions-showMore')).toHaveLength(1);
   });
 
+  it('renders correct options based on the searchable input', () => {
+    const config = {
+      ...defaultConfig,
+      control: 'multioption',
+      searchable: true
+    };
+    const component = COMPONENT_MANAGER.create('FilterOptions', config);
+    const wrapper = mount(component);
+    expect(options).toHaveLength(6);
+    const searchInputEl = wrapper.find('.js-yxt-FilterOptions-filter');
+    expect(searchInputEl).toHaveLength(1);
+
+    // empty input
+    searchInputEl.at(0).simulate('input', { target: { value: '' } });
+    expect(wrapper.find('.js-yxt-FilterOptions-clearSearch').hasClass('js-hidden')).toBeTruthy();
+    expect(wrapper.find('.js-yxt-FilterOptions-container')
+      .hasClass('yxt-FilterOptions-container--searching')).toBeFalsy();
+    let filterOptionEls = wrapper.find('.js-yxt-FilterOptions-option');
+    for (let index = 0; index < filterOptionEls.length; index++) {
+      const filterOptionEl = filterOptionEls.at(index);
+
+      expect(filterOptionEl.hasClass('hiddenSearch')).toBeFalsy();
+      expect(filterOptionEl.hasClass('displaySearch')).toBeFalsy();
+      expect(filterOptionEl.find('.js-yxt-FilterOptions-optionLabel--name').text().trim())
+        .toEqual(options[index].label);
+    }
+
+    // non-empty input
+    searchInputEl.at(0).simulate('input', { target: { value: 'cir' } });
+    expect(wrapper.find('.js-yxt-FilterOptions-clearSearch').hasClass('js-hidden')).toBeFalsy();
+    expect(wrapper.find('.js-yxt-FilterOptions-container')
+      .hasClass('yxt-FilterOptions-container--searching')).toBeTruthy();
+    filterOptionEls = wrapper.find('.js-yxt-FilterOptions-option');
+    for (let index = 0; index < filterOptionEls.length; index++) {
+      const filterOptionEl = filterOptionEls.at(index);
+      expect(filterOptionEl.hasClass(index === 0 ? 'displaySearch' : 'hiddenSearch')).toBeTruthy();
+      expect(filterOptionEl.hasClass(index === 0 ? 'hiddenSearch' : 'displaySearch')).toBeFalsy();
+      expect(filterOptionEl.find('.js-yxt-FilterOptions-optionLabel--name').text().trim())
+        .toEqual(index === 0 ? '<strong>cir</strong>i' : options[index].label);
+    }
+  });
+
   it('renders correct number of multi options', () => {
     const config = {
       ...defaultConfig,