npm - @searchstax-inc/searchstudio-ux-react - Versions diffs - 1.0.46 → 2.0.0 - Mend

@searchstax-inc/searchstudio-ux-react 1.0.46 → 2.0.0

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 (20) hide show

package/README.md CHANGED Viewed

@@ -2,129 +2,85 @@
 Library to build Site Search page
-## changelog
-changelog is documented at CHANGELOG.md
 ## Installation
 npm install following package
 `npm install --save @searchstax-inc/searchstudio-ux-react`
-Add following code to `<head>`
+## Usage
+Add the following code to <head>:
 ```
 <script type="text/javascript">
       var _msq = _msq || []; //declare object
-      var analyticsBaseUrl = 'https://analytics-us-east.searchstax.co';
+      var analyticsBaseUrl = '<https://analytics-us-east.searchstax.co>';
       (function () {
         var ms = document.createElement('script');
         ms.type = 'text/javascript';
-        ms.src = 'https://static.searchstax.co/studio-js/v3/js/studio-analytics.js';
+        ms.src = '<https://static.searchstax.co/studio-js/v3/js/studio-analytics.js>';
         var s = document.getElementsByTagName('script')[0];
         s.parentNode.insertBefore(ms, s);
       })();
     </script>
 ```
-## Usage
-After importing SearchstaxWrapper component needs to wrap all other components:
+## Initialization
+sampleConfig object needs to be of type: `ISearchstaxConfig`
 ```
+const sampleConfig = {
+  language: 'en',
+  searchURL: '',
+  suggesterURL: '',
+  trackApiKey: '',
+  searchAuth: '',
+  authType: 'basic',
+  router: {
+    enabled: true,
+    routeName: 'searchstax',
+    title: (result) => `Search results for: ${result.query}`,
+    ignoredKeys: []
+  },
+  hooks: {
+    beforeSearch: (props) => {
+// modify props
+      return props;
+    },
+    afterSearch: (results) => {
+// modify results
+      return results;
+    }
+  }
+};
 <SearchstaxWrapper
-        searchURL={config.searchURL}
-        suggesterURL={config.suggesterURL}
-        trackApiKey={config.trackApiKey}
-        searchAuth={config.searchAuth}
-        initialized={initialized}
-        beforeSearch={beforeSearch}
-        afterSearch={afterSearch}
-        authType="basic"
-        language="en"
-        model=""
-      >
-  // other components will go there
-  </SearchstaxWrapper>
-```
+  language={sampleConfig.language}
+  searchURL={sampleConfig.searchURL}
+  suggesterURL={sampleConfig.suggesterURL}
+  trackApiKey={sampleConfig.trackApiKey}
+  searchAuth={sampleConfig.searchAuth}
+  authType={sampleConfig.authType}
+  router={sampleConfig.router}
+  beforeSearch={sampleConfig.hooks.beforeSearch}
+  afterSearch={sampleConfig.hooks.afterSearch}
+>
+</SearchstaxWrapper>
-## Initialization
-Initialization object needs to be of type: [ISearchstaxConfig](https://github.com/searchstax/searchstudio-ux-js/blob/main/src/interfaces/connector.interface.ts#L5)
-Initialization example
-```
-sampleConfig = {
-    language: "en",
-    model:""
-    searchURL: "",
-    suggesterURL: "",
-    trackApiKey: "",
-    searchAuth: "",
-    authType: "basic",
-    router: {
-      enabled: true,
-      routeName: "searchstax",
-      title: (result: ISearchObject) => {
-        return "Search results for: " + result.query;
-      },
-      ignoredKeys: [],
-    },
-    hooks: {
-      beforeSearch: function (props: ISearchObject) {
-        const propsCopy = { ...props };
-        return propsCopy;
-      },
-      afterSearch: function (results: ISearchstaxParsedResult[]) {
-        const copy = [...results];
-        return copy;
-      },
-    }
-  };
 ```
 ## Initial layout
-Our base theme is designed with this layout in mind but it is optional as all widgets have id parameters and can be attached to any element.
+Add any other Site Search components as needed:
 ```
-<SearchstaxWrapper
-        searchURL={sampleConfig.searchURL}
-        suggesterURL={sampleConfig.suggesterURL}
-        trackApiKey={sampleConfig.trackApiKey}
-        searchAuth={sampleConfig.searchAuth}
-        beforeSearch={sampleConfig.hooks.beforeSearch}
-        afterSearch={sampleConfig.hooks.afterSearch}
-        authType="basic"
-        language="en"
-        model=""
-      >
-        <div className="searchstax-page-layout-container">
-          <SearchstaxInputWidget
-            afterAutosuggest={afterAutosuggest}
-            beforeAutosuggest={beforeAutosuggest}
-            inputTemplate={InputTemplate}
-          ></SearchstaxInputWidget>
+<SearchstaxWrapper>
-          <div className="search-details-container">
-            <div id="search-feedback-container"></div>
-            <div id="search-sorting-container"></div>
-          </div>
+  <SearchstaxInputWidget />
-          <div className="searchstax-page-layout-facet-result-container">
-            <div className="searchstax-page-layout-facet-container">
-              <div id="searchstax-facets-container"></div>
-            </div>
+  <SearchstaxResultsWidget />
-            <div className="searchstax-page-layout-result-container">
-              <div id="searchstax-external-promotions-layout-container"></div>
-              <SearchstaxResultWidget
-                afterLinkClick={afterLinkClick}
-                noResultTemplate={noResultTemplate}
-                resultsTemplate={resultsTemplate}
-              ></SearchstaxResultWidget>
-              <div id="searchstax-related-searches-container"></div>
-              <div id="searchstax-pagination-container"></div>
-            </div>
-          </div>
-        </div>
-      </SearchstaxWrapper>
+  {/* Other components */}
+</SearchstaxWrapper>
 ```
 ### widgets
@@ -151,19 +107,51 @@ Following widgets are available:
 [sorting Widget](#sorting-widget)
 ### Answer Widget ###
+SearchStax Site Search solution offers React and Next.js widgets to assist in building your custom search page.
+The SearchstaxAnswerWidget component provides a React and Next.js AI answer widget for your searches.
+**Usage**
-example of answer widget initialization with minimum options
 ```
 <SearchstaxAnswerWidget
               showShowMoreAfterWordCount={100}
+              feedbackConfig={feedbackConfig}
             ></SearchstaxAnswerWidget>
 ```
+**Props**
-example of answer widget initialization with lightweight feedback widget
+- showShowMoreAfterWordCount - number(default 100) determining after how many symbols UI will show “Read More” view.
+- feedbackWidget – an optional object that configures thumbs-up and thumbs-down feedback functionality.
+Example of feedbackWidget config:
+```
+const feedbackConfig = {
+    renderFeedbackWidget: true,
+    emailOverride: searchstaxEmailOverride,
+    thumbsUpValue: 10,
+    thumbsDownValue: 0
+  }
 ```
-export function answerTemplate(
+**searchAnswerTemplate**
+The templates prop allows customizing the answer UI.
+It receives the following props:
+- shouldShowAnswer – boolean
+- answerErrorMessage – string
+- fullAnswerFormatted – string
+- showMoreButtonVisible – boolean
+- answerLoading – boolean
+**Example**
+```
+function answerTemplate(
   answerData: null | ISearchstaxAnswerData,
   showMore: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void
 ) {
@@ -198,7 +186,7 @@ export function answerTemplate(
                   showMore(e);
                 }}
               >
-                Read More
+                Read more
               </button>
             </div>
           )}
@@ -213,67 +201,205 @@ export function answerTemplate(
     </>
   );
 }
-const feedbackConfig = {
-  renderFeedbackWidget: true,
-  emailOverride: searchstaxEmailOverride,
-  thumbsUpValue: 10,
-  thumbsDownValue: 0,
-  lightweightTemplateOverride: `
-   <div class="searchstax-lightweight-widget-container">
-   <div class="searchstax-lightweight-widget-thumbs-up {{#thumbsUpActive}}active{{/thumbsUpActive}}">
-   <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M4.85079 7.59996L7.83141 1C8.4243 1 8.9929 1.23178 9.41213 1.64436C9.83136 2.05694 10.0669 2.61651 10.0669 3.19999V6.1333H14.2845C14.5005 6.13089 14.7145 6.17474 14.9116 6.26179C15.1087 6.34885 15.2842 6.47704 15.426 6.63747C15.5677 6.79791 15.6723 6.98676 15.7326 7.19094C15.7928 7.39513 15.8072 7.60975 15.7748 7.81996L14.7465 14.4199C14.6926 14.7696 14.5121 15.0884 14.2382 15.3175C13.9643 15.5466 13.6156 15.6706 13.2562 15.6666H4.85079M4.85079 7.59996V15.6666M4.85079 7.59996H2.61531C2.22006 7.59996 1.84099 7.75448 1.5615 8.02953C1.28201 8.30458 1.125 8.67763 1.125 9.06661V14.1999C1.125 14.5889 1.28201 14.9619 1.5615 15.237C1.84099 15.512 2.22006 15.6666 2.61531 15.6666H4.85079"  stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-    </svg>
-</div>
-   <div class="searchstax-lightweight-widget-separator"></div>
-   <div class="searchstax-lightweight-widget-thumbs-down {{#thumbsDownActive}}active{{/thumbsDownActive}}">
-    <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M12.1492 9.06801L9.16859 15.668C8.5757 15.668 8.0071 15.4362 7.58787 15.0236C7.16864 14.611 6.93311 14.0515 6.93311 13.468V10.5347H2.71552C2.4995 10.5371 2.28552 10.4932 2.08842 10.4062C1.89132 10.3191 1.71581 10.1909 1.57405 10.0305C1.43229 9.87006 1.32766 9.6812 1.26743 9.47702C1.2072 9.27284 1.19279 9.05822 1.22521 8.84801L2.25353 2.24806C2.30742 1.89833 2.48793 1.57955 2.76179 1.35046C3.03566 1.12136 3.38443 0.997398 3.74384 1.0014H12.1492M12.1492 9.06801V1.0014M12.1492 9.06801H14.3847C14.7799 9.06801 15.159 8.91349 15.4385 8.63844C15.718 8.36339 15.875 7.99034 15.875 7.60135V2.46805C15.875 2.07907 15.718 1.70602 15.4385 1.43097C15.159 1.15592 14.7799 1.0014 14.3847 1.0014H12.1492"  stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-    </svg>
-   </div>
-   </div>
-    `,
-}
 <SearchstaxAnswerWidget
               searchAnswerTemplate={answerTemplate}
               showShowMoreAfterWordCount={100}
-              feedbackwidget={feedbackConfig}
             ></SearchstaxAnswerWidget>
 ```
-example of answer widget initialization without feedback widget
-```
+### Input Widget ###
-<SearchstaxAnswerWidget
-              searchAnswerTemplate={answerTemplate}
-              showShowMoreAfterWordCount={100}
-            ></SearchstaxAnswerWidget>
-```
+SearchStax Site Search solution provides React and Next.js widgets to help you build your custom search page.
-### Input Widget ###
+The SearchstaxInputWidget component provides a search input with autosuggest/autocomplete functionality.
-example of input widget initialization with minimum options
+**Usage**
 ```
 <SearchstaxInputWidget
+            suggestAfterMinChars={3}
             afterAutosuggest={afterAutosuggest}
             beforeAutosuggest={beforeAutosuggest}
           ></SearchstaxInputWidget>
 ```
+**Props**
+- suggestAfterMinChars - default 3. Number of characters needed for autosuggest to start triggering
+- beforeAutosuggest - callback function that gets called before firing autosuggest. autosuggestProps are being passed as a property and can be modified, if passed along further search will execute with modified properties, if null is returned then event gets canceled and search never fires.
+- afterAutosuggest - callback function that gets called after autosuggest has values but before rendering. It needs to return same type of data but it can be modified.
+- inputTemplate - template override. look at examples below
-example of input widget initialization with template override
+**inputWidgetTemplate**
+The inputTemplate prop allows customizing the input UI.
+It receives the following props:
+- locationEnabled – boolean
+**example**
 ```
- function InputTemplate(
-    suggestions: ISearchstaxSuggestion[],
-    onMouseLeave: () => void,
-    onMouseOver: (suggestion: ISearchstaxSuggestion) => void,
-    onMouseClick: () => void
+const config = {
+  appId: "APP_ID",
+  relatedSearchesAPIKey: "KEY"
+}
+const locationWidgetConfig = {
+    locationDecode: (term: string): Promise<ISearchstaxLocation> => {
+      return new Promise((resolve) => {
+        // make a request to google geocoding API to retrieve lat, lon and address
+        const geocodingAPIKey = "GEOCODING_API_KEY";
+        const geocodingURL = `https://maps.googleapis.com/maps/api/geocode/json?address=${encodeURIComponent(
+          term
+        )}&key=${geocodingAPIKey}`;
+        fetch(geocodingURL)
+          .then((response) => response.json())
+          .then((data) => {
+            if (data.status === "OK" && data.results.length > 0) {
+              const result = data.results[0];
+              const location = {
+                lat: result.geometry.location.lat,
+                lon: result.geometry.location.lng,
+                address: result.formatted_address,
+              };
+              resolve(location);
+            } else {
+              resolve({
+                address: undefined,
+                lat: undefined,
+                lon: undefined,
+                error: true,
+              });
+            }
+          })
+          .catch(() => {
+            resolve({
+              address: undefined,
+              lat: undefined,
+              lon: undefined,
+              error: true,
+            });
+          });
+      });
+    },
+    locationDecodeCoordinatesToAddress: (lat: string, lon: string): Promise<ISearchstaxLocation> => {
+      return new Promise((resolve) => {
+        fetch(
+          `https://geocoding-staging.searchstax.co/reverse?location=${lat},${lon}&components=country:US&app_id=${config.appId}`,
+          {
+            method: "GET",
+            headers: {
+              Authorization: `Token ${config.relatedSearchesAPIKey}`,
+            },
+          }
+        )
+          .then((response) => response.json())
+          .then((data) => {
+            if (data.status === "OK" && data.results.length > 0) {
+              const result = data.results[0];
+              resolve({
+                address: result.formatted_address,
+                lat: lat,
+                lon: lon,
+                error: false,
+              });
+            } else {
+              resolve({
+                address: undefined,
+                lat: lat,
+                lon: lon,
+                error: true,
+              });
+            }
+          })
+          .catch(() => {
+            resolve({
+              address: undefined,
+              lat: lat,
+              lon: lon,
+              error: true,
+            });
+          });
+      });
+    },
+    locationSearchEnabled: false,
+    locationValuesOverride: {
+      locationDistanceEnabled: true,
+      filterValues: ["any", "1000"],
+      filterUnit: "miles",
+      locationFilterDefaultValue: "any"
+    },
+  }
+function LocationTemplate(
+    locationData: null | ISearchstaxLocationRenderData,
+    locationChange: (value: string) => void,
+    locationBlur: (value: string) => void,
+    radiusChange: (value: string | number) => void,
+    getCurrentLocation: () => void,
+    inputValue?: string | null,
+    selectValue?: string | number | undefined,
+    locationError?: boolean
   ): React.ReactElement {
     return (
-    <div className="searchstax-search-input-wrapper">
+     <>
+        {locationData && (
+          <div
+            className="searchstax-location-input-container"
+            data-test-id="searchstax-location-input-container"
+          >
+            <div className="searchstax-location-input-wrapper">
+              <span className="searchstax-location-input-label">NEAR</span>
+              <div className="searchstax-location-input-wrapper-inner">
+                <input
+                  type="text"
+                  id="searchstax-location-input"
+                  className={"searchstax-location-input" + (locationError ? " searchstax-input-location-error" : "")}
+                  placeholder="Zip, Postal Code or City..."
+                  aria-label="Search Location Input"
+                  data-test-id="searchstax-location-input"
+                  value={inputValue ?? ""}
+                  onChange={(e) => locationChange(e.target.value)}
+                  onBlur={(e) => locationBlur(e.target.value)}
+                />
+                <button onClick={getCurrentLocation} className="searchstax-get-current-location-button">Use my current location</button>
+              </div>
+              {locationData.shouldShowLocationDistanceDropdown && (
+                <span className="searchstax-location-input-label">WITHIN</span>
+              )}
+              {locationData.shouldShowLocationDistanceDropdown && (
+                <select
+                  id="searchstax-location-radius-select"
+                  className="searchstax-location-radius-select"
+                  aria-label="Search Location Radius Select"
+                  data-test-id="searchstax-location-radius-select"
+                  onChange={(e) => radiusChange(e.target.value)}
+                  value={selectValue}
+                >
+                  {locationData.locationSearchDistanceValues.map(
+                    ({ value, label }) => (
+                      <option value={value} key={value}>
+                        {label}
+                      </option>
+                    )
+                  )}
+                </select>
+              )}
+            </div>
+          </div>
+        )}
+    </>)
+  }
+function InputTemplate(
+  suggestions: ISearchstaxSuggestion[],
+  onMouseLeave: () => void,
+  onMouseOver: (suggestion: ISearchstaxSuggestion) => void,
+  onMouseClick: () => void
+): React.ReactElement {
+  return (
+    <>
+      <div className="searchstax-search-input-wrapper">
         <input
           type="text"
           id="searchstax-search-input"
@@ -295,6 +421,7 @@ example of input widget initialization with template override
               >
                 <div
                   className="searchstax-autosuggest-item-term-container"
+                  tabIndex={0}
                   dangerouslySetInnerHTML={{ __html: suggestion.term }}
                   onMouseOver={() => {
                     onMouseOver(suggestion);
@@ -307,16 +434,25 @@ example of input widget initialization with template override
             );
           })}
         </div>
-        <button
-          className="searchstax-spinner-icon"
-          id="searchstax-search-input-action-button"
-          aria-label="search"
-        ></button>
       </div>
-    );
-  }
+      <SearchstaxLocationWidget
+        searchLocationTemplate={LocationTemplate}
+        hooks={{
+          locationDecode: locationWidgetConfig.locationDecode,
+          locationDecodeCoordinatesToAddress:
+            locationWidgetConfig.locationDecodeCoordinatesToAddress,
+        }}
+        locationSearchEnabled={locationWidgetConfig.locationSearchEnabled}
+        locationValuesOverride={locationWidgetConfig.locationValuesOverride}
+      />
+      <button
+        className="searchstax-spinner-icon"
+        id="searchstax-search-input-action-button"
+        aria-label="search"
+      ></button>
+    </>
+  );
+}
 <SearchstaxInputWidget
             afterAutosuggest={afterAutosuggest}
@@ -324,38 +460,220 @@ example of input widget initialization with template override
             inputTemplate={InputTemplate}
           ></SearchstaxInputWidget>
 ```
 ### Location Widget ###
-example of location widget initialization with minimum options
+SearchStax Site Search solution offers a React search-location widget to assist with your custom search page.
+The SearchstaxLocationWidget provides a location search input with location-based search functionality.
+**Usage**
 ```
-function locationDecodeFunction(term: string): Promise<ISearchstaxLocation>{
-        return new Promise((resolve) => {
-          // make a request to geocoding API to retrieve lat, lon and address and then resolve promise
-      resolve({
-                  address:'Address',
-                  lat: lat,
-                  lon: lon,
-                  error: false
-                });
-        });
-  }
-  function locationDecodeCoordinatesToAddress(lat, lon): Promise<ISearchstaxLocation>{
+const config = {
+  appId: "APP_ID",
+  relatedSearchesAPIKey: "KEY"
+}
+const locationWidgetConfig = {
+    locationDecode: (term: string): Promise<ISearchstaxLocation> => {
       return new Promise((resolve) => {
-        // make a request to geocoding API to convert lat, lon to address and then resolve promise
-      resolve({
-                  address:'Address',
-                  lat: lat,
-                  lon: lon,
-                  error: false
-                });
+        // make a request to google geocoding API to retrieve lat, lon and address
+        const geocodingAPIKey = "GEOCODING_API_KEY";
+        const geocodingURL = `https://maps.googleapis.com/maps/api/geocode/json?address=${encodeURIComponent(
+          term
+        )}&key=${geocodingAPIKey}`;
+        fetch(geocodingURL)
+          .then((response) => response.json())
+          .then((data) => {
+            if (data.status === "OK" && data.results.length > 0) {
+              const result = data.results[0];
+              const location = {
+                lat: result.geometry.location.lat,
+                lon: result.geometry.location.lng,
+                address: result.formatted_address,
+              };
+              resolve(location);
+            } else {
+              resolve({
+                address: undefined,
+                lat: undefined,
+                lon: undefined,
+                error: true,
+              });
+            }
+          })
+          .catch(() => {
+            resolve({
+              address: undefined,
+              lat: undefined,
+              lon: undefined,
+              error: true,
+            });
+          });
       });
-    }
-    <SearchstaxLocationWidget hooks={ {locationDecode: locationDecodeFunction, locationDecodeCoordinatesToAddress: locationDecodeCoordinatesToAddress} } />
+    },
+    locationDecodeCoordinatesToAddress: (lat: string, lon: string): Promise<ISearchstaxLocation> => {
+      return new Promise((resolve) => {
+        fetch(
+          `https://geocoding-staging.searchstax.co/reverse?location=${lat},${lon}&components=country:US&app_id=${config.appId}`,
+          {
+            method: "GET",
+            headers: {
+              Authorization: `Token ${config.relatedSearchesAPIKey}`,
+            },
+          }
+        )
+          .then((response) => response.json())
+          .then((data) => {
+            if (data.status === "OK" && data.results.length > 0) {
+              const result = data.results[0];
+              resolve({
+                address: result.formatted_address,
+                lat: lat,
+                lon: lon,
+                error: false,
+              });
+            } else {
+              resolve({
+                address: undefined,
+                lat: lat,
+                lon: lon,
+                error: true,
+              });
+            }
+          })
+          .catch(() => {
+            resolve({
+              address: undefined,
+              lat: lat,
+              lon: lon,
+              error: true,
+            });
+          });
+      });
+    },
+    locationSearchEnabled: false,
+    locationValuesOverride: {
+      locationDistanceEnabled: true,
+      filterValues: ["any", "1000"],
+      filterUnit: "miles",
+      locationFilterDefaultValue: "any"
+    },
+  }
+<SearchstaxLocationWidget hooks={ {locationDecode: locationDecodeFunction, locationDecodeCoordinatesToAddress: locationDecodeCoordinatesToAddress} } />
 ```
-example of location widget initialization with template override
+**Props**
+- locationDecode - callback function to override location decoding
+- locationDecodeCoordinatesToAddress - callback function to override location decoding
+**Template Override**
+The searchLocationTemplate prop allows customizing the location input UI.
+It receives the following props:
+- locationSearchDistanceValues – location distance values
+- shouldShowLocationDistanceDropdown – boolean determining if distance dropdown should be shown
+**Example**
 ```
+const config = {
+  appId: "APP_ID",
+  relatedSearchesAPIKey: "KEY"
+}
+const locationWidgetConfig = {
+    locationDecode: (term: string): Promise<ISearchstaxLocation> => {
+      return new Promise((resolve) => {
+        // make a request to google geocoding API to retrieve lat, lon and address
+        const geocodingAPIKey = "GEOCODING_API_KEY";
+        const geocodingURL = `https://maps.googleapis.com/maps/api/geocode/json?address=${encodeURIComponent(
+          term
+        )}&key=${geocodingAPIKey}`;
+        fetch(geocodingURL)
+          .then((response) => response.json())
+          .then((data) => {
+            if (data.status === "OK" && data.results.length > 0) {
+              const result = data.results[0];
+              const location = {
+                lat: result.geometry.location.lat,
+                lon: result.geometry.location.lng,
+                address: result.formatted_address,
+              };
+              resolve(location);
+            } else {
+              resolve({
+                address: undefined,
+                lat: undefined,
+                lon: undefined,
+                error: true,
+              });
+            }
+          })
+          .catch(() => {
+            resolve({
+              address: undefined,
+              lat: undefined,
+              lon: undefined,
+              error: true,
+            });
+          });
+      });
+    },
+    locationDecodeCoordinatesToAddress: (lat: string, lon: string): Promise<ISearchstaxLocation> => {
+      return new Promise((resolve) => {
+        fetch(
+          `https://geocoding-staging.searchstax.co/reverse?location=${lat},${lon}&components=country:US&app_id=${config.appId}`,
+          {
+            method: "GET",
+            headers: {
+              Authorization: `Token ${config.relatedSearchesAPIKey}`,
+            },
+          }
+        )
+          .then((response) => response.json())
+          .then((data) => {
+            if (data.status === "OK" && data.results.length > 0) {
+              const result = data.results[0];
+              resolve({
+                address: result.formatted_address,
+                lat: lat,
+                lon: lon,
+                error: false,
+              });
+            } else {
+              resolve({
+                address: undefined,
+                lat: lat,
+                lon: lon,
+                error: true,
+              });
+            }
+          })
+          .catch(() => {
+            resolve({
+              address: undefined,
+              lat: lat,
+              lon: lon,
+              error: true,
+            });
+          });
+      });
+    },
+    locationSearchEnabled: false,
+    locationValuesOverride: {
+      locationDistanceEnabled: true,
+      filterValues: ["any", "1000"],
+      filterUnit: "miles",
+      locationFilterDefaultValue: "any"
+    },
+  }
 function LocationTemplate(
     locationData: null | ISearchstaxLocationRenderData,
     locationChange: (value: string) => void,
@@ -420,7 +738,12 @@ function LocationTemplate(
 ### Result Widget ###
-example of results widget initialization with minimum options
+The SearchStax Site Search solution provides a React and Next.js results widget to support your custom search page.
+The SearchstaxResultsWidget displays the search results.
+**Usage**
 ```
 <SearchstaxResultWidget
                 afterLinkClick={afterLinkClick}
@@ -428,62 +751,121 @@ example of results widget initialization with minimum options
               ></SearchstaxResultWidget>
 ```
-example of results widget initialization with minimum options for infinite scroll behavior
+**Result Template Override**
+The resultsTemplate prop allows customizing the result UI.
+It receives no props:
+- custom?: any - custom properties that may be added through aftersearchHook
+- ribbon: string | null
+- paths: string | null;
+- url: string | null;
+- title: string | null;
+- titleTracking: string | null;
+- promoted: boolean | null;
+- thumbnail: string | null;
+- date: string | null;
+- snippet: string | null;
+- description: string | null;
+- uniqueId: string;
+- position: number;
+- distance: number | null;
+- unit: string | null;
+- unmappedFields: {
+   key: string;
+   value: string | string[] | boolean;
+   isImage?: boolean;
+ }[] - fields that were not mapped.
+- allFields: { key: string; value: string | string[] | boolean }[] - all fields
+**No Results Template Override**
+The noResultTemplate prop allows customizing the result UI.
+It receives following props:
+- spellingSuggestion - suggestion of corrected spelling
+- searchExecuted - boolean if search was executed
+- searchTerm - term that was searched
+**Example of default render method**
 ```
-<SearchstaxResultWidget
-                afterLinkClick={afterLinkClick}
-                renderMethod={'infiniteScroll'}
-              ></SearchstaxResultWidget>
 ```
-example of result widget initialization with template override
+**Example of infinite scroll and pagination render methods**
 ```
-function noResultTemplate(searchTerm: string, metaData: ISearchstaxSearchMetadata | null, executeSearch: (term:string) => void): React.ReactElement {
-    return (
-      <div>
-        <div className="searchstax-no-results">
-          {" "}
-          Showing <strong>no results</strong> for <strong>"{searchTerm}"</strong>
-          <br />
-          {metaData?.spellingSuggestion && (
-            <span>
-              &nbsp;Did you mean{" "}
-              <a href="#" className="searchstax-suggestion-term" onClick={(e) => {
-                          e.preventDefault();
-                          executeSearch(metaData?.spellingSuggestion);
-                        }}>
-                {metaData?.spellingSuggestion}
-              </a>
-              ?
-            </span>
-          )}
-        </div>
-        <ul>
-          <li>
-            {" "}
-            Try searching for search related terms or topics. We offer a wide variety of content to help you get the
-            information you need.{" "}
-          </li>
-          <li>Lost? Click on the ‘X” in the Search Box to reset your search.</li>
-        </ul>
+function noResultTemplate(
+  searchTerm: string,
+  metaData: ISearchstaxSearchMetadata | null,
+  executeSearch: (searchTerm: string) => void
+): React.ReactElement {
+  return (
+    <div>
+      <div className="searchstax-no-results">
+        {" "}
+        Showing <strong>no results</strong> for <strong>"{searchTerm}"</strong>
+        <br />
+        {metaData?.spellingSuggestion && (
+          <span>
+            &nbsp;Did you mean{" "}
+            <a
+              href="#"
+              aria-label={`Did you mean ${metaData?.spellingSuggestion}`}
+              className="searchstax-suggestion-term"
+              onClick={(e) => {
+                e.preventDefault();
+                executeSearch(metaData?.spellingSuggestion);
+              }}
+            >
+              {metaData?.spellingSuggestion}
+            </a>
+            ?
+          </span>
+        )}
       </div>
-    );
-  }
+      <ul>
+        <li>
+          {" "}
+          Try searching for search related terms or topics. We offer a wide
+          variety of content to help you get the information you need.{" "}
+        </li>
+        <li>Lost? Click on the ‘X” in the Search Box to reset your search.</li>
+      </ul>
+    </div>
+  );
+}
-  function resultsTemplate(
-    searchResults: ISearchstaxParsedResult[],
-    resultClicked: (results: ISearchstaxParsedResult, event: any) => ISearchstaxParsedResult[]
-  ): React.ReactElement {
-    return (
-     <>
-        {searchResults && searchResults.length && (
-          <div className="searchstax-search-results">
-            {searchResults !== null &&
-              searchResults.map(function (searchResult) {
-                return (
-                  <a href={searchResult.url ?? ''} key={searchResult.uniqueId} onClick={event => {
+function resultsTemplate(
+  searchResults: ISearchstaxParsedResult[],
+  resultClicked: (
+    results: ISearchstaxParsedResult,
+    event: any
+  ) => void
+): React.ReactElement {
+  return (
+    <>
+      {searchResults && searchResults.length && (
+        <div className="searchstax-search-results" aria-live="polite">
+          {searchResults !== null &&
+            searchResults.map(function (searchResult) {
+              return (
+                <a
+                  href={searchResult.url ?? ""}
+                  onClick={(event) => {
                     resultClicked(searchResult, event);
-                  }} tabIndex={0} data-searchstax-unique-result-id={ searchResult.uniqueId} className="searchstax-result-item-link searchstax-result-item-link-wrapping">
+                  }}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      resultClicked(searchResult, e);
+                    }
+                  }}
+                  data-searchstax-unique-result-id={searchResult.uniqueId}
+                  key={searchResult.uniqueId}
+                  className="searchstax-result-item-link searchstax-result-item-link-wrapping"
+                  tabIndex={0}
+                >
                   <div
                     className={`searchstax-search-result ${
                       searchResult.thumbnail ? "has-thumbnail" : ""
@@ -494,36 +876,46 @@ function noResultTemplate(searchTerm: string, metaData: ISearchstaxSearchMetadat
                       <div className="searchstax-search-result-promoted"></div>
                     )}
                     {searchResult.ribbon && (
-                      <div className="searchstax-search-result-ribbon">
-                        {searchResult.ribbon}
-                      </div>
+                      <div
+                        className="searchstax-search-result-ribbon"
+                        dangerouslySetInnerHTML={{
+                          __html: searchResult.ribbon,
+                        }}
+                      ></div>
                     )}
                     {searchResult.thumbnail && (
                       <img
+                        alt=""
                         src={searchResult.thumbnail}
                         className="searchstax-thumbnail"
                       />
                     )}
                     <div className="searchstax-search-result-title-container">
-                      <span className="searchstax-search-result-title">
-                        {searchResult.title}
-                      </span>
+                      <span
+                        className="searchstax-search-result-title"
+                        dangerouslySetInnerHTML={{
+                          __html: searchResult.title ?? "",
+                        }}
+                      ></span>
                     </div>
                     {searchResult.paths && (
-                      <p className="searchstax-search-result-common">
-                        {searchResult.paths}
-                      </p>
+                      <p
+                        className="searchstax-search-result-common"
+                        dangerouslySetInnerHTML={{ __html: searchResult.paths }}
+                      ></p>
                     )}
                     {searchResult.description && (
-                      <p className="searchstax-search-result-description searchstax-search-result-common">
-                        {searchResult.description}
-                      </p>
+                      <p
+                        className="searchstax-search-result-description searchstax-search-result-common"
+                        dangerouslySetInnerHTML={{
+                          __html: searchResult.description,
+                        }}
+                      ></p>
                     )}
                     {searchResult.unmappedFields.map(function (
@@ -535,6 +927,7 @@ function noResultTemplate(searchTerm: string, metaData: ISearchstaxSearchMetadat
                             typeof unmappedField.value === "string" && (
                               <div className="searchstax-search-result-image-container">
                                 <img
+                                  alt=""
                                   src={unmappedField.value}
                                   className="searchstax-result-image"
                                 />
@@ -543,62 +936,103 @@ function noResultTemplate(searchTerm: string, metaData: ISearchstaxSearchMetadat
                           {!unmappedField.isImage && (
                             <div>
-                              <p className="searchstax-search-result-common">
-                                {unmappedField.value}
-                              </p>
+                              <p
+                                className="searchstax-search-result-common"
+                                dangerouslySetInnerHTML={{
+                                  __html: unmappedField.value,
+                                }}
+                              ></p>
                             </div>
                           )}
                         </div>
                       );
                     })}
                   </div>
-                  </a>
-                );
-              })}
-          </div>
-        )}
-      </>
-    );
-  }
+                </a>
+              );
+            })}
+        </div>
+      )}
+    </>
+  );
+}
+<SearchstaxResultWidget
+                afterLinkClick={afterLinkClick}
+                noResultTemplate={noResultTemplate}
+                resultsTemplate={resultsTemplate}
+                renderMethod={'pagination'}
+              ></SearchstaxResultWidget>
+  // Infinite scroll
 <SearchstaxResultWidget
                 afterLinkClick={afterLinkClick}
                 noResultTemplate={noResultTemplate}
                 resultsTemplate={resultsTemplate}
+                renderMethod={'infiniteScroll'}
               ></SearchstaxResultWidget>
 ```
 ### Pagination Widget ###
+The SearchStax Site Search solution offers a pagination widget for React and Next.js search pages.
+The SearchstaxPaginationWidget displays pagination controls for search results.
+**Usage**
-example of pagination widget initialization with minimum options
 ```
 <SearchstaxPaginationWidget></SearchstaxPaginationWidget>
 ```
-example of pagination widget initialization with various options
+**Main Template Override**
+Main template for the pagination controls.
+It receives following props:
+- nextPageLink - link of next page;
+- previousPageLink - link of previous page;
+**Infinite Scroll Template Override**
+Main template for the pagination controls in infinite scroll mode.
+It receives following props:
+- isLastPage - boolean, true if its last page
+- results - results.length can be used if there are results
+**Example**
 ```
 function paginationTemplate(
     paginationData: IPaginationData | null,
     nextPage: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void,
-    previousPage: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void
+    previousPage: (
+      event: React.MouseEvent<HTMLAnchorElement, MouseEvent>
+    ) => void
   ) {
     return (
-     <>
+      <>
         {paginationData && paginationData?.totalResults !== 0 && (
           <div className="searchstax-pagination-container">
             <div className="searchstax-pagination-content">
               <a
-                className="searchstax-pagination-previous"
+                className={`searchstax-pagination-previous ${paginationData.isFirstPage ? "disabled" : ""}`}
+                tabIndex={0}
                 style={
                   paginationData?.isFirstPage ? { pointerEvents: "none" } : {}
                 }
                 onClick={(e) => {
                   previousPage(e);
                 }}
-                tabIndex={0}
-                id="searchstax-pagination-previous"
+                onKeyDown={(e) => {
+                  if(e.key === 'Enter' || e.key === ' ') {
+                    previousPage(e as any);
+                  }
+                }}
+                id="searchstax-pagination-previous"
               >
                 {" "}
                 &lt; Previous{" "}
@@ -610,14 +1044,19 @@ function paginationTemplate(
                 {paginationData?.totalResults}
               </div>
               <a
-                className="searchstax-pagination-next"
+                className={`searchstax-pagination-next ${paginationData.isLastPage ? "disabled" : ""}`}
+                tabIndex={0}
                 style={
                   paginationData?.isLastPage ? { pointerEvents: "none" } : {}
                 }
                 onClick={(e) => {
                   nextPage(e);
                 }}
-                tabIndex={0}
+                onKeyDown={(e) => {
+                  if(e.key === 'Enter' || e.key === ' ') {
+                    nextPage(e as any);
+                  }
+                }}
                 id="searchstax-pagination-next"
               >
                 Next &gt;
@@ -629,12 +1068,7 @@ function paginationTemplate(
     );
   }
-  <SearchstaxPaginationWidget paginationTemplate={paginationTemplate}></SearchstaxPaginationWidget>
-```
-example of pagination widget for infinite scroll
-```
-    function infiniteScrollTemplate(
+  function infiniteScrollTemplate(
     paginationData: IPaginationData | null,
     nextPage: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void
   ) {
@@ -647,6 +1081,7 @@ example of pagination widget for infinite scroll
             <div className="searchstax-pagination-container">
               <a
                 className="searchstax-pagination-load-more"
+                tabIndex={0}
                 onClick={(e) => {
                   nextPage(e);
                 }}
@@ -663,13 +1098,21 @@ example of pagination widget for infinite scroll
       </>
     );
   }
-  <SearchstaxPaginationWidget infiniteScrollTemplate={infiniteScrollTemplate}></SearchstaxPaginationWidget>
+<SearchstaxPaginationWidget paginationTemplate={paginationTemplate}></SearchstaxPaginationWidget>
+// example of pagination widget for infinite scroll
+<SearchstaxPaginationWidget infiniteScrollTemplate={infiniteScrollTemplate}></SearchstaxPaginationWidget>
 ```
 ### Facets Widget ###
-example of facets widget initialization with minimum options
+The SearchStax Site Search solution offers a SearchstaxFacetsWidget component for React and Next.js. This widget displays the search facets.
+**Facet Selection and Order**
+Facet lists are configured and ordered on the Site Search [Faceting Tab](https://www.searchstax.com/docs/searchstudio/faceting-tab/).
+**Usage**
 ```
 <SearchstaxFacetsWidget
                 facetingType="and"
@@ -679,362 +1122,395 @@ example of facets widget initialization with minimum options
               ></SearchstaxFacetsWidget>
 ```
+**Props**
+- facetingType: "and" | "or" | "showUnavailable" | "tabs"; // type that determines how facets will behave
+- specificFacets?: string[]; // optional array of facet names that if provided will only render those facets
+- itemsPerPageDesktop: number; // default expanded facets for desktop
+- itemsPerPageMobile: number; // default expanded facets for mobile
+- templates - see examples below
+**Main Template Desktop Override**
+Main wrapper template for desktop facets display.
+It receives following props from [IFacetsTemplateData](https://www.searchstax.com/docs/searchstudio/interfaces/#h-facets-interfaces)
-example of facets widget initialization with template overrides
+**Main Template Mobile Override**
+Main wrapper template for mobile facets display.
+It receives following props from [IFacetsTemplateData](https://www.searchstax.com/docs/searchstudio/interfaces/#h-facets-interfaces)
+**Example**
 ```
-function facetsTemplateDesktop(
-    facetsTemplateDataDesktop: IFacetsTemplateData | null,
-    facetContainers: {
-      [key: string]: React.LegacyRef<HTMLDivElement> | undefined;
-    },
-    isNotDeactivated: (name: string) => boolean,
-    toggleFacetGroup: (name: string) => void,
-    selectFacet: (
-      index: string,
-      event: React.MouseEvent<HTMLDivElement, MouseEvent>,
-      data: IFacetValueData,
-      isInput: boolean
-    ) => void,
-    isChecked: (facetValue: IFacetValueData) => boolean | undefined,
-    showMoreLessDesktop: (
-      e: React.MouseEvent<HTMLDivElement, MouseEvent>,
-      data: IFacetData
-    ) => void
-  ) {
-    return (
-      <div className="searchstax-facets-container-desktop">
-        {facetsTemplateDataDesktop?.facets.map((facet) => {
-          return (
-            <div
-              className={`searchstax-facet-container ${
-                isNotDeactivated(facet.name) ? "active" : ""
-              }`}
-              key={facet.name + "desktop"}
-            >
-              <div>
-                <div
-                  className="searchstax-facet-title-container"
-                  onClick={() => {
-                    toggleFacetGroup(facet.name);
-                  }}
-                >
-                  <div className="searchstax-facet-title"> {facet.label}</div>
-                  <div className="searchstax-facet-title-arrow active"></div>
+ function facetsTemplateDesktop(
+  facetsTemplateDataDesktop: IFacetsTemplateData | null,
+  facetContainers: {
+    [key: string]: React.LegacyRef<HTMLDivElement> | undefined;
+  },
+  isNotDeactivated: (name: string) => boolean,
+  toggleFacetGroup: (name: string) => void,
+  selectFacet: (
+    index: string,
+    event: React.MouseEvent<HTMLDivElement, MouseEvent>,
+    data: IFacetValueData,
+    isInput: boolean
+  ) => void,
+  isChecked: (facetValue: IFacetValueData) => boolean | undefined,
+  showMoreLessDesktop: (
+    e: React.MouseEvent<HTMLDivElement, MouseEvent>,
+    data: IFacetData
+  ) => void
+) {
+  return (
+    <div className="searchstax-facets-container-desktop">
+      {facetsTemplateDataDesktop?.facets.map((facet) => {
+        return (
+          <div
+            className={`searchstax-facet-container ${
+              isNotDeactivated(facet.name) ? "active" : ""
+            }`}
+            key={facet.name + "desktop"}
+          >
+            <div>
+              <div
+                className="searchstax-facet-title-container"
+                onClick={() => {
+                  toggleFacetGroup(facet.name);
+                }}
+              >
+                <div className="searchstax-facet-title">
+                  {" "}
+                  {facet.label}
                 </div>
-                <div className="searchstax-facet-values-container">
-                  {facet.values.map(
-                    //@ts-ignore
-                    (facetValue: IFacetValueData, key) => {
-                      facetContainers[key + facet.name] = createRef();
-                      return (
+                <div className="searchstax-facet-title-arrow active"></div>
+              </div>
+              <div className="searchstax-facet-values-container" aria-live="polite">
+                {facet.values.map(
+                  //@ts-ignore
+                  (facetValue: IFacetValueData, key) => {
+                    facetContainers[key + facet.name] = createRef();
+                    return (
+                      <div
+                        key={facetValue.value + facetValue.parentName}
+                        className={`searchstax-facet-value-container ${
+                          facetValue.disabled
+                            ? "searchstax-facet-value-disabled"
+                            : ""
+                        }`}
+                        ref={facetContainers[key + facet.name]}
+                      >
                         <div
-                          key={facetValue.value + facetValue.parentName}
-                          className={`searchstax-facet-value-container ${
-                            facetValue.disabled
-                              ? "searchstax-facet-value-disabled"
-                              : ""
-                          }`}
-                          ref={facetContainers[key + facet.name]}
+                          className={
+                            "searchstax-facet-input" +
+                            " desktop-" +
+                            key +
+                            facet.name
+                          }
                         >
-                          <div className={
-                                    "searchstax-facet-input" +
-                                    " desktop-" +
-                                    key +
-                                    facet.name
-                                  }>
-                            <input
-                              type="checkbox"
-                              className="searchstax-facet-input-checkbox"
-                              checked={isChecked(facetValue)}
-                              readOnly={true}
-                              aria-label={facetValue.value + ' ' + facetValue.count}
-                              disabled={facetValue.disabled}
-                              onClick={(e) => {
-                                selectFacet(
-                                  key + facet.name,
-                                  e,
-                                  facetValue,
-                                  true
-                                );
-                              }}
-                            />
-                          </div>
-                          <div
-                            className="searchstax-facet-value-label"
-                            onClick={(e) => {
-                              selectFacet(
-                                key + facet.name,
-                                e,
-                                facetValue,
-                                false
-                              );
-                            }}
-                          >
-                            {facetValue.value}
-                          </div>
-                          <div
-                            className="searchstax-facet-value-count"
+                          <input
+                            type="checkbox"
+                            className="searchstax-facet-input-checkbox"
+                            checked={isChecked(facetValue)}
+                            readOnly={true}
+                            aria-label={facetValue.value + ' ' + facetValue.count}
+                            disabled={facetValue.disabled}
                             onClick={(e) => {
                               selectFacet(
                                 key + facet.name,
                                 e,
                                 facetValue,
-                                false
+                                true
                               );
                             }}
-                          >
-                            ({facetValue.count})
-                          </div>
+                          />
+                        </div>
+                        <div
+                          className="searchstax-facet-value-label"
+                          onClick={(e) => {
+                            selectFacet(key + facet.name, e, facetValue, false);
+                          }}
+                        >
+                          {facetValue.value}
+                        </div>
+                        <div
+                          className="searchstax-facet-value-count"
+                          onClick={(e) => {
+                            selectFacet(key + facet.name, e, facetValue, false);
+                          }}
+                        >
+                          ({facetValue.count})
                         </div>
-                      );
-                    }
-                  )}
-                  {facet.hasMoreFacets && (
-                    <div className="searchstax-facet-show-more-container">
-                      <div
-                        className="searchstax-facet-show-more-container"
-                        onClick={(e) => {
-                          showMoreLessDesktop(e, facet);
-                        }}
-                      >
-                        {facet.showingAllFacets && (
-                          <div className="searchstax-facet-show-less-button searchstax-facet-show-button">
-                            less
-                          </div>
-                        )}
-                        {!facet.showingAllFacets && (
-                          <div className="searchstax-facet-show-more-button  searchstax-facet-show-button">
-                            more
-                          </div>
-                        )}
                       </div>
+                    );
+                  }
+                )}
+                {facet.hasMoreFacets && (
+                  <div className="searchstax-facet-show-more-container">
+                    <div
+                      className="searchstax-facet-show-more-container"
+                      onClick={(e) => {
+                        showMoreLessDesktop(e, facet);
+                      }}
+                      onKeyDown={(e) => {
+                        if(e.key === 'Enter' || e.key === ' ') {
+                          showMoreLessDesktop(e as any, facet);
+                        }
+                      }}
+                      tabIndex={0}
+                    >
+                      {facet.showingAllFacets && (
+                        <div className="searchstax-facet-show-less-button searchstax-facet-show-button">
+                          less
+                        </div>
+                      )}
+                      {!facet.showingAllFacets && (
+                        <div className="searchstax-facet-show-more-button  searchstax-facet-show-button">
+                          more
+                        </div>
+                      )}
                     </div>
-                  )}
-                </div>
+                  </div>
+                )}
               </div>
             </div>
-          );
-        })}
-      </div>
-    );
-  }
-  function facetsTemplateMobile(
-    facetsTemplateDataMobile: IFacetsTemplateData | null,
-    selectedFacetsCheckboxes: IFacetValue[],
-    facetContainers: {
-      [key: string]: React.LegacyRef<HTMLDivElement> | undefined;
-    },
-    isNotDeactivated: (name: string) => boolean,
-    toggleFacetGroup: (name: string) => void,
-    selectFacet: (
-      index: string,
-      event: React.MouseEvent<HTMLDivElement, MouseEvent>,
-      data: IFacetValueData,
-      isInput: boolean
-    ) => void,
-    isChecked: (facetValue: IFacetValueData) => boolean | undefined,
-    unselectFacet: (facet: IFacetValue) => void,
-    showMoreLessMobile: (
-      e: React.MouseEvent<HTMLDivElement, MouseEvent>,
-      data: IFacetData
-    ) => void,
-    openOverlay: () => void,
-    closeOverlay: () => void,
-    unselectAll: () => void
-  ) {
-    return facetsTemplateDataMobile ? (
-      <div className="searchstax-facets-container-mobile">
-        <div className="searchstax-facets-pills-container">
-          <div
-            className="searchstax-facets-pill searchstax-facets-pill-filter-by"
-            onClick={() => {
-              openOverlay();
-            }}
-          >
-            <div className="searchstax-facets-pill-label">Filter By</div>
           </div>
-          <div className="searchstax-facets-pills-selected">
-            {selectedFacetsCheckboxes.map((facet) => {
-              return (
-                <div
-                  className="searchstax-facets-pill searchstax-facets-pill-facets"
-                  key={facet.value}
-                  onClick={() => {
-                    unselectFacet(facet);
-                  }}
-                >
-                  <div className="searchstax-facets-pill-label">
-                    {facet.value} ({facet.count})
-                  </div>
-                  <div className="searchstax-facets-pill-icon-close"></div>
-                </div>
-              );
-            })}
-            {selectedFacetsCheckboxes.length !== 0 && (
+        );
+      })}
+    </div>
+  );
+}
+function facetsTemplateMobile(
+  facetsTemplateDataMobile: IFacetsTemplateData | null,
+  selectedFacetsCheckboxes: IFacetValue[],
+  facetContainers: {
+    [key: string]: React.LegacyRef<HTMLDivElement> | undefined;
+  },
+  isNotDeactivated: (name: string) => boolean,
+  toggleFacetGroup: (name: string) => void,
+  selectFacet: (
+    index: string,
+    event: React.MouseEvent<HTMLDivElement, MouseEvent>,
+    data: IFacetValueData,
+    isInput: boolean,
+    isMobile?: boolean
+  ) => void,
+  isChecked: (facetValue: IFacetValueData) => boolean | undefined,
+  unselectFacet: (facet: IFacetValue) => void,
+  showMoreLessMobile: (
+    e: React.MouseEvent<HTMLDivElement, MouseEvent>,
+    data: IFacetData
+  ) => void,
+  openOverlay: () => void,
+  closeOverlay: () => void,
+  unselectAll: () => void
+) {
+  return facetsTemplateDataMobile ? (
+    <div className="searchstax-facets-container-mobile">
+      <div className="searchstax-facets-pills-container">
+        <div
+          className="searchstax-facets-pill searchstax-facets-pill-filter-by"
+          onClick={() => {
+            openOverlay();
+          }}
+        >
+          <div className="searchstax-facets-pill-label">Filter By</div>
+        </div>
+        <div className="searchstax-facets-pills-selected">
+          {selectedFacetsCheckboxes.map((facet) => {
+            return (
               <div
-                className="searchstax-facets-pill searchstax-clear-filters searchstax-facets-pill-clear-all"
+                className="searchstax-facets-pill searchstax-facets-pill-facets"
+                key={facet.value}
                 onClick={() => {
-                  unselectAll();
+                  unselectFacet(facet);
                 }}
               >
                 <div className="searchstax-facets-pill-label">
-                  Clear Filters
+                  {facet.value} ({facet.count})
                 </div>
+                <div className="searchstax-facets-pill-icon-close"></div>
               </div>
-            )}
-          </div>
-          <div
-            className={`searchstax-facets-mobile-overlay ${
-              //@ts-ignore
-              facetsTemplateDataMobile.overlayOpened ? "searchstax-show" : ""
-            }`}
-          >
-            <div className="searchstax-facets-mobile-overlay-header">
-              <div className="searchstax-facets-mobile-overlay-header-title">
-                Filter By
-              </div>
-              <div
-                className="searchstax-search-close"
-                onClick={() => {
-                  closeOverlay();
-                }}
-              ></div>
+            );
+          })}
+          {selectedFacetsCheckboxes.length !== 0 && (
+            <div
+              className="searchstax-facets-pill searchstax-clear-filters searchstax-facets-pill-clear-all"
+              onClick={() => {
+                unselectAll();
+              }}
+            >
+              <div className="searchstax-facets-pill-label">Clear Filters</div>
             </div>
-            <div className="searchstax-facets-container-mobile">
-              {facetsTemplateDataMobile?.facets.map((facet) => {
-                return (
-                  <div
-                    key={facet.name + "mobile"}
-                    className={`searchstax-facet-container ${
-                      isNotDeactivated(facet.name) ? `active` : ``
-                    }`}
-                  >
-                    <div>
-                      <div
-                        className="searchstax-facet-title-container"
-                        onClick={() => {
-                          toggleFacetGroup(facet.name);
-                        }}
-                      >
-                        <div className="searchstax-facet-title">
-                          {" "}
-                          {facet.label}{" "}
-                        </div>
-                        <div className="searchstax-facet-title-arrow active"></div>
+          )}
+        </div>
+        <div
+          className={`searchstax-facets-mobile-overlay ${
+            //@ts-ignore
+            facetsTemplateDataMobile.overlayOpened ? "searchstax-show" : ""
+          }`}
+        >
+          <div className="searchstax-facets-mobile-overlay-header">
+            <div className="searchstax-facets-mobile-overlay-header-title">
+              Filter By
+            </div>
+            <div
+              className="searchstax-search-close"
+              onClick={() => {
+                closeOverlay();
+              }}
+            ></div>
+          </div>
+          <div className="searchstax-facets-container-mobile">
+            {facetsTemplateDataMobile?.facets.map((facet) => {
+              return (
+                <div
+                  key={facet.name + "mobile"}
+                  className={`searchstax-facet-container ${
+                    isNotDeactivated(facet.name) ? `active` : ``
+                  }`}
+                >
+                  <div>
+                    <div
+                      className="searchstax-facet-title-container"
+                      onClick={() => {
+                        toggleFacetGroup(facet.name);
+                      }}
+                    >
+                      <div className="searchstax-facet-title">
+                        {" "}
+                        {facet.label}{" "}
                       </div>
-                      <div className="searchstax-facet-values-container">
-                        {facet.values.map(
-                          //@ts-ignore
-                          (facetValue: IFacetValueData, key) => {
-                            facetContainers[key + facet.name] = createRef();
-                            return (
+                      <div className="searchstax-facet-title-arrow active"></div>
+                    </div>
+                    <div className="searchstax-facet-values-container" aria-live="polite">
+                      {facet.values.map(
+                        //@ts-ignore
+                        (facetValue: IFacetValueData, key) => {
+                          facetContainers[key + facet.name] = createRef();
+                          return (
+                            <div
+                              key={facetValue.value + facetValue.parentName}
+                              className={`searchstax-facet-value-container ${
+                                facetValue.disabled
+                                  ? `searchstax-facet-value-disabled`
+                                  : ``
+                              }`}
+                              ref={facetContainers[key + facet.name]}
+                            >
                               <div
-                                key={facetValue.value + facetValue.parentName}
-                                className={`searchstax-facet-value-container ${
-                                  facetValue.disabled
-                                    ? `searchstax-facet-value-disabled`
-                                    : ``
-                                }`}
-                                ref={facetContainers[key + facet.name]}
+                                className={
+                                  "searchstax-facet-input" +
+                                  " mobile-" +
+                                  key +
+                                  facet.name
+                                }
                               >
-                                <div className={
-                                    "searchstax-facet-input" +
-                                    " mobile-" +
-                                    key +
-                                    facet.name
-                                  }>
-                                  <input
-                                    type="checkbox"
-                                    className="searchstax-facet-input-checkbox"
-                                    checked={isChecked(facetValue)}
-                                    readOnly={true}
-                                    aria-label={facetValue.value + ' ' + facetValue.count}
-                                    disabled={facetValue.disabled}
-                                    onClick={(e) => {
-                                      selectFacet(
-                                        key + facet.name,
-                                        e,
-                                        facetValue,
-                                        true
-                                      );
-                                    }}
-                                  />
-                                </div>
-                                <div
-                                  className="searchstax-facet-value-label"
+                                <input
+                                  type="checkbox"
+                                  className="searchstax-facet-input-checkbox"
+                                  checked={isChecked(facetValue)}
+                                  readOnly={true}
+                                  aria-label={facetValue.value + ' ' + facetValue.count}
+                                  disabled={facetValue.disabled}
                                   onClick={(e) => {
                                     selectFacet(
                                       key + facet.name,
                                       e,
                                       facetValue,
-                                      false
+                                      true,
+                                      true
                                     );
                                   }}
-                                >
-                                  {facetValue.value}
-                                </div>
-                                <div
-                                  className="searchstax-facet-value-count"
-                                  onClick={(e) => {
-                                    selectFacet(
-                                      key + facet.name,
-                                      e,
-                                      facetValue,
-                                      false
-                                    );
-                                  }}
-                                >
-                                  ({facetValue.count})
-                                </div>
+                                />
                               </div>
-                            );
-                          }
-                        )}
+                              <div
+                                className="searchstax-facet-value-label"
+                                onClick={(e) => {
+                                  selectFacet(
+                                    key + facet.name,
+                                    e,
+                                    facetValue,
+                                    false
+                                  );
+                                }}
+                              >
+                                {facetValue.value}
+                              </div>
+                              <div
+                                className="searchstax-facet-value-count"
+                                onClick={(e) => {
+                                  selectFacet(
+                                    key + facet.name,
+                                    e,
+                                    facetValue,
+                                    false
+                                  );
+                                }}
+                              >
+                                ({facetValue.count})
+                              </div>
+                            </div>
+                          );
+                        }
+                      )}
+                      <div
+                        className="searchstax-facet-show-more-container"
+                        v-if="facet.hasMoreFacets"
+                      >
                         <div
                           className="searchstax-facet-show-more-container"
-                          v-if="facet.hasMoreFacets"
+                          onClick={(e) => {
+                            showMoreLessMobile(e, facet);
+                          }}
+                          onKeyDown={(e) => {
+                            if(e.key === 'Enter' || e.key === ' ') {
+                              showMoreLessMobile(e as any, facet);
+                            }
+                          }}
+                          tabIndex={0}
                         >
-                          <div
-                            className="searchstax-facet-show-more-container"
-                            onClick={(e) => {
-                              showMoreLessMobile(e, facet);
-                            }}
-                          >
-                            {facet.showingAllFacets && (
-                              <div className="searchstax-facet-show-less-button searchstax-facet-show-button">
-                                less
-                              </div>
-                            )}
-                            {!facet.showingAllFacets && (
-                              <div className="searchstax-facet-show-more-button  searchstax-facet-show-button">
-                                more
-                              </div>
-                            )}
-                          </div>
+                          {facet.showingAllFacets && (
+                            <div className="searchstax-facet-show-less-button searchstax-facet-show-button">
+                              less
+                            </div>
+                          )}
+                          {!facet.showingAllFacets && (
+                            <div className="searchstax-facet-show-more-button  searchstax-facet-show-button">
+                              more
+                            </div>
+                          )}
                         </div>
                       </div>
                     </div>
                   </div>
-                );
-              })}
-            </div>
-            <button
-              className="searchstax-facets-mobile-overlay-done"
-              onClick={() => {
-                closeOverlay();
-              }}
-            >
-              Done
-            </button>
+                </div>
+              );
+            })}
           </div>
+          <button
+            className="searchstax-facets-mobile-overlay-done"
+            onClick={() => {
+              closeOverlay();
+            }}
+          >
+            Done
+          </button>
         </div>
       </div>
-    ) : (<></>);
-  }
+    </div>
+  ) : (
+    <></>
+  );
+}
 <SearchstaxFacetsWidget
                 facetingType="and"
                 itemsPerPageDesktop={2}
@@ -1047,102 +1523,151 @@ function facetsTemplateDesktop(
 ### SearchFeedback Widget ###
-example of search feedback widget initialization with minimum options
+The SearchStax Site Search solution provides a search feedback widget to support your React and Next.js search pages.
+The SearchstaxFeedbackWidget displays search feedback and stats.
+**Usage**
 ```
 <SearchstaxOverviewWidget></SearchstaxOverviewWidget>
 ```
+**Main Template Override**
+Main template for the search feedback message.
+It receives following props:
+- searchExecuted - boolean, true if search was executed
+- hasResults - boolean, true if search has results
+- startResultIndex - number, start of page results
+- endResultIndex - number, end of page results
+- totalResults - number, total results
+- searchTerm - term that was searched
+- autoCorrectedQuery - query that search was autocorrected to
+- originalQuery - original query
-example of search feedback widget initialization  with template overrides
+**Example**
 ```
 function searchOverviewTemplate(
     searchFeedbackData: null | ISearchstaxSearchFeedbackData,
-    onOriginalQueryClick: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void
+    onOriginalQueryClick: (
+      event: React.MouseEvent<HTMLAnchorElement, MouseEvent>
+    ) => void
   ) {
     return (
       <>
-        {searchFeedbackData && searchFeedbackData?.searchExecuted && searchFeedbackData?.totalResults > 0 && (
-          <>
-            Showing{" "}
-            <b>
-              {searchFeedbackData.startResultIndex} - {searchFeedbackData.endResultIndex}
-            </b>{" "}
-            of
-            <b> {searchFeedbackData.totalResults}</b> results
-            {searchFeedbackData.searchTerm && (
-              <span>
-                &nbsp;for "<b>{searchFeedbackData.searchTerm}</b>"{" "}
-              </span>
-            )}
-            <div className="searchstax-feedback-container-suggested">
-              {searchFeedbackData.autoCorrectedQuery && (
-                <div>
-                  {" "}
-                  Search instead for{" "}
-                  <a
-                    href="#"
-                    onClick={(e) => {
-                      onOriginalQueryClick(e);
-                    }}
-                    className="searchstax-feedback-original-query"
-                  >
-                    {searchFeedbackData.originalQuery}
-                  </a>
-                </div>
+        {searchFeedbackData &&
+          searchFeedbackData?.searchExecuted &&
+          searchFeedbackData?.totalResults > 0 && (
+            <>
+              Showing{" "}
+              <b>
+                {searchFeedbackData.startResultIndex} -{" "}
+                {searchFeedbackData.endResultIndex}
+              </b>{" "}
+              of
+              <b> {searchFeedbackData.totalResults}</b> results
+              {searchFeedbackData.searchTerm && (
+                <span>
+                  &nbsp;for "<b>{searchFeedbackData.searchTerm}</b>"{" "}
+                </span>
               )}
-            </div>
-          </>
-        )}
+              <div className="searchstax-feedback-container-suggested">
+                {searchFeedbackData.autoCorrectedQuery && (
+                  <div>
+                    {" "}
+                    Search instead for{" "}
+                    <a
+                      href="#"
+                      onClick={(e) => {
+                        onOriginalQueryClick(e);
+                      }}
+                      className="searchstax-feedback-original-query"
+                      aria-label={`Search instead for ${searchFeedbackData.originalQuery}`}
+                    >
+                      {searchFeedbackData.originalQuery}
+                    </a>
+                  </div>
+                )}
+              </div>
+            </>
+          )}
       </>
     );
   }
-  <SearchstaxOverviewWidget searchOverviewTemplate={searchOverviewTemplate}></SearchstaxOverviewWidget>
+<SearchstaxOverviewWidget searchOverviewTemplate={searchOverviewTemplate}></SearchstaxOverviewWidget>
 ```
-## RelatedSearches widget
+### RelatedSearches widget ###
+The SearchStax Site Search solution offers a related-searches widget for React and Next.js search pages.
+The SearchstaxRelatedSearchesWidget displays related searches.
-example of search feedback widget initialization with minimum options
+**Usage**
 ```
-<SearchstaxRelatedSearchesWidget
+  <SearchstaxRelatedSearchesWidget
                 relatedSearchesURL={config.relatedSearchesURL}
                 relatedSearchesAPIKey={config.relatedSearchesAPIKey}
               ></SearchstaxRelatedSearchesWidget>
 ```
+**Main Template Override**
+Main template for related searches.
+It receives following props:
+- hasRelatedSearches - boolean, true if has related searches
+- relatedSearches - array of related searches
+- related_search - string, related searc
+- last - boolean, true if last related search
+**Example**
-example of search feedback widget initialization with template overrides
 ```
-  function searchRelatedSearchesTemplate(
+ function searchRelatedSearchesTemplate(
     relatedData: null | ISearchstaxRelatedSearchesData,
     executeSearch: (result: ISearchstaxRelatedSearchResult) => void
   ) {
     return (
       <>
-        {relatedData && relatedData?.searchExecuted && relatedData?.hasRelatedSearches && (
-          <div className="searchstax-related-searches-container" id="searchstax-related-searches-container">
-            {" "}
-            Related searches: <span id="searchstax-related-searches"></span>
-            {relatedData.relatedSearches && (
-              <span className="searchstax-related-search">
-                {relatedData.relatedSearches.map((related) => (
-                  <span
-                    key={related.related_search}
-                    onClick={() => {
-                      executeSearch(related);
-                    }}
-                    className="searchstax-related-search searchstax-related-search-item"
-                  >
-                    {" "}
-                    {related.related_search}
-                    {!related.last && <span>,</span>}
-                  </span>
-                ))}
-              </span>
-            )}
-          </div>
-        )}
+        {relatedData &&
+          relatedData?.searchExecuted &&
+          relatedData?.hasRelatedSearches && (
+            <div
+              className="searchstax-related-searches-container"
+              id="searchstax-related-searches-container"
+            >
+              {" "}
+              Related searches: <span id="searchstax-related-searches"></span>
+              {relatedData.relatedSearches && (
+                <span className="searchstax-related-search">
+                  {relatedData.relatedSearches.map((related) => (
+                    <span
+                      key={related.related_search}
+                      onClick={() => {
+                        executeSearch(related);
+                      }}
+                      onKeyDown={(e) => {
+                        if(e.key === 'Enter' || e.key === ' ') {
+                          executeSearch(related);
+                        }
+                      }}
+                      tabIndex={0}
+                      className="searchstax-related-search searchstax-related-search-item"
+                      aria-label={'Related search: ' + related.related_search}
+                    >
+                      {" "}
+                      {related.related_search}
+                      {!related.last && <span>,</span>}
+                    </span>
+                  ))}
+                </span>
+              )}
+            </div>
+          )}
       </>
     );
   }
@@ -1151,60 +1676,83 @@ example of search feedback widget initialization with template overrides
                 relatedSearchesAPIKey={config.relatedSearchesAPIKey}
                 searchRelatedSearchesTemplate={searchRelatedSearchesTemplate}
               ></SearchstaxRelatedSearchesWidget>
 ```
 ### ExternalPromotions widget ###
-example of search feedback widget initialization with minimum options
+The SearchStax Site Search solution offers an external-promotions widget to assist with your React and Next.js custom search pages.
+The SearchstaxExternalPromotionsWidget displays external promotions fetched from the API.
+**Usage**
 ```
 <SearchstaxExternalPromotionsWidget></SearchstaxExternalPromotionsWidget>
 ```
+**Main Template Override**
+Main template for external promotions.
+It receives following props:
-example of search feedback widget initialization  with template overrides
+- hasExternalPromotions - boolean, true if has external promotions
+- url - url of external promotion
+- uniqueId - unique id
+- name - name of promotion
+- description - description
+**Example**
 ```
-  function searchExternalPromotionsTemplate(
-    externalPromotionsData: null | ISearchstaxExternalPromotionsData,
-    trackClick: (externalPromotion: IExternalPromotion, event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void
-  ) {
-    return (
-      <>
-        {externalPromotionsData &&
-          externalPromotionsData?.searchExecuted &&
-          externalPromotionsData?.hasExternalPromotions &&
-          externalPromotionsData.externalPromotions.map((externalPromotion) => (
-            <div className="searchstax-external-promotion searchstax-search-result" key={externalPromotion.id}>
-              <div className="icon-elevated"></div>
-              {externalPromotion.url && (
-                <a
-                  href={externalPromotion.url}
-                  onClick={(event) => {
-                    trackClick(externalPromotion, event);
-                  }}
-                  className="searchstax-result-item-link"
-                ></a>
-              )}
-              <div className="searchstax-search-result-title-container">
-                <span className="searchstax-search-result-title">{externalPromotion.name}</span>
-              </div>
-              {externalPromotion.description && (
-                <p className="searchstax-search-result-description searchstax-search-result-common">
-                  {" "}
-                  {externalPromotion.description}{" "}
-                </p>
-              )}
-              {externalPromotion.url && (
-                <p className="searchstax-search-result-description searchstax-search-result-common">
-                  {" "}
-                  {externalPromotion.url}{" "}
-                </p>
-              )}
+function searchExternalPromotionsTemplate(
+  externalPromotionsData: null | ISearchstaxExternalPromotionsData,
+  trackClick: (
+    externalPromotion: IExternalPromotion,
+    event: React.MouseEvent<HTMLAnchorElement, MouseEvent>
+  ) => void
+) {
+  return (
+    <>
+      {externalPromotionsData &&
+        externalPromotionsData?.searchExecuted &&
+        externalPromotionsData?.hasExternalPromotions &&
+        externalPromotionsData.externalPromotions.map((externalPromotion) => (
+          <div
+            className="searchstax-external-promotion searchstax-search-result"
+            key={externalPromotion.id}
+          >
+            <div className="icon-elevated"></div>
+            {externalPromotion.url && (
+              <a
+                href={externalPromotion.url}
+                onClick={(event) => {
+                  trackClick(externalPromotion, event);
+                }}
+                className="searchstax-result-item-link"
+              ></a>
+            )}
+            <div className="searchstax-search-result-title-container">
+              <span className="searchstax-search-result-title">
+                {externalPromotion.name}
+              </span>
             </div>
-          ))}
-      </>
-    );
-  }
+            {externalPromotion.description && (
+              <p className="searchstax-search-result-description searchstax-search-result-common">
+                {" "}
+                {externalPromotion.description}{" "}
+              </p>
+            )}
+            {externalPromotion.url && (
+              <p className="searchstax-search-result-description searchstax-search-result-common">
+                {" "}
+                {externalPromotion.url}{" "}
+              </p>
+            )}
+          </div>
+        ))}
+    </>
+  );
+}
 <SearchstaxExternalPromotionsWidget
                 searchExternalPromotionsTemplate={searchExternalPromotionsTemplate}
               ></SearchstaxExternalPromotionsWidget>
@@ -1213,44 +1761,61 @@ example of search feedback widget initialization  with template overrides
 ### Sorting Widget ###
-example of sorting widget initialization with minimum options
+The SearchStax Site Search solution offers a sorting widget for your React or Next.js custom search page.
+The SearchstaxSortingWidget displays sorting options for search results.
+**Usage**
 ```
 <SearchstaxSortingWidget></SearchstaxSortingWidget>
 ```
+**Main Template Override**
+Main template for sorting widget.
+It receives following props:
+- searchExecuted - boolean, true if search was executed
+- hasResultsOrExternalPromotions - boolean, true if there are results or external promotions
+- sortOptions - array of sort options, has key/value
+**Example**
-example of sorting widget initialization with template override
 ```
- function searchSortingTemplate(
+function searchSortingTemplate(
     sortingData: null | ISearchstaxSearchSortingData,
     orderChange: (value: string) => void,
     selectedSorting: string
   ) {
     return (
       <>
-        {sortingData && sortingData?.searchExecuted && sortingData?.hasResultsOrExternalPromotions && (
-          <div className="searchstax-sorting-container">
-            <label className="searchstax-sorting-label" htmlFor="searchstax-search-order-select">
-              Sort By
-            </label>
-            <select
-              id="searchstax-search-order-select"
-              className="searchstax-search-order-select"
-              value={selectedSorting}
-              onChange={(e) => {
-                orderChange(e.target.value);
-              }}
-            >
-              {sortingData.sortOptions.map(function (sortOption) {
+        {sortingData &&
+          sortingData?.searchExecuted &&
+          sortingData?.hasResultsOrExternalPromotions && (
+            <div className="searchstax-sorting-container">
+              <label className="searchstax-sorting-label" htmlFor="searchstax-search-order-select">
+                Sort By
+              </label>
+              <select
+                id="searchstax-search-order-select"
+                className="searchstax-search-order-select"
+                value={selectedSorting}
+                onChange={(e) => {
+                  orderChange(e.target.value);
+                }}
+              >
+                {sortingData.sortOptions.map(function (sortOption) {
                   return (
                     <option key={sortOption.key} value={sortOption.key}>
                       {sortOption.value}
                     </option>
                   );
                 })}
-            </select>
-          </div>
-        )}
+              </select>
+            </div>
+          )}
       </>
     );
   }
@@ -1259,7 +1824,7 @@ example of sorting widget initialization with template override
 ## Template overrides
-Templates use vue slots.
+Templates use relatedsearches templating.
 ## STYLING
@@ -1271,4 +1836,4 @@ css can be taken from
 ```
 ./../node_modules/@searchstax-inc/searchstudio-ux-js/dist/styles/mainTheme.css
-```
+```