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

package/CHANGELOG.md

@@ -0,0 +1,31 @@
+# Change Log
+
+All notable changes to the "searchstudio-ux-react" project will be documented in this file.
+
+## [1.0.1] - 2024-10-08
+### ⚠️ BREAKING CHANGES
+- Result template needs to be updated to print variables as HTML because they now will contain html <em> tags if highlighting is enabled
+### Features
+- Added support for highlighting controlled via studio UI
+- Results per page are now configured through studio UI
+### Bug Fixes
+- Tracking calls now use unmodified title of the result
+
+## [1.0.5] - 2024-11-05
+### Bug Fixes
+- fix & and + symbols causing issues in facet values
+
+## [2.0.0]
+### Features
+- Readme updated to give more information on how widgets work
+### Bug Fixes
+- NVDA facet groups now announce state
+- NVDA added ability to jump from facets to results section
+
+## [4.1.0]
+### Bug Fixes
+- stopped making unnecessary calls on blank search page load
+- accessibility: template modified to only read result title for accessibility
+- accessibility: leave feedback button state change is now announced
+- accessibility: focus persistance added for feedback rating
+- added support for react 19

package/README.md

@@ -115,15 +115,16 @@ The SearchstaxAnswerWidget component provides a React and Next.js AI answer widg
 
 ```
 <SearchstaxAnswerWidget
-              showShowMoreAfterWordCount={100}
-              feedbackConfig={feedbackConfig}
+              showMoreAfterWordCount={100}
+              feedbackwidget={feedbackConfig}
             ></SearchstaxAnswerWidget>
 ```
 
 **Props**
 
-- showShowMoreAfterWordCount - number(default 100) determining after how many symbols UI will show “Read More” view.
+- showMoreAfterWordCount - 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.
+- searchAnswerTemplate - template override for answers widget
 
 Example of feedbackWidget config:
 ```
@@ -203,7 +204,7 @@ function answerTemplate(
 }
 <SearchstaxAnswerWidget
               searchAnswerTemplate={answerTemplate}
-              showShowMoreAfterWordCount={100}
+              showMoreAfterWordCount={100}
             ></SearchstaxAnswerWidget>
 ```
 
@@ -568,6 +569,7 @@ const locationWidgetConfig = {
 
 - locationDecode - callback function to override location decoding
 - locationDecodeCoordinatesToAddress - callback function to override location decoding
+- searchLocationTemplate - template override for location widget
 
 **Template Override**
 
@@ -748,9 +750,19 @@ The SearchstaxResultsWidget displays the search results.
 <SearchstaxResultWidget
                 afterLinkClick={afterLinkClick}
                 renderMethod={'pagination'}
+                resultsPerPage={10}
               ></SearchstaxResultWidget>
 ```
 
+**Props**
+
+- renderMethod – either “pagination” or “infiniteScroll”.
+- resultsPerPage – number of results on a page.
+- afterLinkClick – Callback function invoked when a result link is clicked. Allows modifying the result object.
+- resultsTemplate - template override for result view
+- noResultTemplate - template override for no results view
+
+
 **Result Template Override**
 
 The resultsTemplate prop allows customizing the result UI.
@@ -863,6 +875,7 @@ function resultsTemplate(
                   }}
                   data-searchstax-unique-result-id={searchResult.uniqueId}
                   key={searchResult.uniqueId}
+                  aria-labelledby={`title-${searchResult.uniqueId}`}
                   className="searchstax-result-item-link searchstax-result-item-link-wrapping"
                   tabIndex={0}
                 >
@@ -896,6 +909,7 @@ function resultsTemplate(
                     <div className="searchstax-search-result-title-container">
                       <span
                         className="searchstax-search-result-title"
+                        id={`title-${searchResult.uniqueId}`}
                         dangerouslySetInnerHTML={{
                           __html: searchResult.title ?? "",
                         }}
@@ -985,6 +999,9 @@ The SearchstaxPaginationWidget displays pagination controls for search results.
 <SearchstaxPaginationWidget></SearchstaxPaginationWidget>
 ```
 
+**Props**
+- paginationTemplate - template override for pagination widget
+
 **Main Template Override**
 
 Main template for the pagination controls.
@@ -1128,7 +1145,8 @@ Facet lists are configured and ordered on the Site Search [Faceting Tab](https:/
 - 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
+- facetsTemplateDesktop - template override for desktop view
+- facetsTemplateMobile - template override for mobile view
 
 
 **Main Template Desktop Override**
@@ -1533,6 +1551,10 @@ The SearchstaxFeedbackWidget displays search feedback and stats.
 <SearchstaxOverviewWidget></SearchstaxOverviewWidget>
 ```
 
+**Props**
+
+- searchOverviewTemplate - template override for search overview
+
 **Main Template Override**
 
 Main template for the search feedback message.
@@ -1613,6 +1635,12 @@ The SearchstaxRelatedSearchesWidget displays related searches.
               ></SearchstaxRelatedSearchesWidget>
 ```
 
+**Props**
+
+- relatedSearchesURL: // : An endpoint from the Discovery tab of the App Settings > All APls screen.
+- relatedSearchesAPIKey?: The Discovery API key from the Discovery tab of the App Settings > All
+- searchRelatedSearchesTemplate - template override for related searches
+
 **Main Template Override**
 
 Main template for related searches.
@@ -1690,6 +1718,10 @@ The SearchstaxExternalPromotionsWidget displays external promotions fetched from
 <SearchstaxExternalPromotionsWidget></SearchstaxExternalPromotionsWidget>
 ```
 
+**Props**
+
+- searchExternalPromotionsTemplate - template override for external promotions widget
+
 **Main Template Override**
 
 Main template for external promotions.
@@ -1771,6 +1803,10 @@ The SearchstaxSortingWidget displays sorting options for search results.
 <SearchstaxSortingWidget></SearchstaxSortingWidget>
 ```
 
+**Props**
+
+- searchSortingTemplate - template override for sorting widget
+
 **Main Template Override**
 
 Main template for sorting widget.

package/README.mustache

@@ -115,15 +115,16 @@ The SearchstaxAnswerWidget component provides a React and Next.js AI answer widg
 
 ```
 <SearchstaxAnswerWidget
-              showShowMoreAfterWordCount={100}
-              feedbackConfig={feedbackConfig}
+              showMoreAfterWordCount={100}
+              feedbackwidget={feedbackConfig}
             ></SearchstaxAnswerWidget>
 ```
 
 **Props**
 
-- showShowMoreAfterWordCount - number(default 100) determining after how many symbols UI will show “Read More” view.
+- showMoreAfterWordCount - 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.
+- searchAnswerTemplate - template override for answers widget
 
 Example of feedbackWidget config:
 ```
@@ -154,7 +155,7 @@ It receives the following props:
 {{&SearchstaxAnswerWidget}}
 <SearchstaxAnswerWidget
               searchAnswerTemplate={answerTemplate}
-              showShowMoreAfterWordCount={100}
+              showMoreAfterWordCount={100}
             ></SearchstaxAnswerWidget>
 ```
 
@@ -218,6 +219,7 @@ The SearchstaxLocationWidget provides a location search input with location-base
 
 - locationDecode - callback function to override location decoding
 - locationDecodeCoordinatesToAddress - callback function to override location decoding
+- searchLocationTemplate - template override for location widget
 
 **Template Override**
 
@@ -249,9 +251,19 @@ The SearchstaxResultsWidget displays the search results.
 <SearchstaxResultWidget
                 afterLinkClick={afterLinkClick}
                 renderMethod={'pagination'}
+                resultsPerPage={10}
               ></SearchstaxResultWidget>
 ```
 
+**Props**
+
+- renderMethod – either “pagination” or “infiniteScroll”.
+- resultsPerPage – number of results on a page.
+- afterLinkClick – Callback function invoked when a result link is clicked. Allows modifying the result object.
+- resultsTemplate - template override for result view
+- noResultTemplate - template override for no results view
+
+
 **Result Template Override**
 
 The resultsTemplate prop allows customizing the result UI.
@@ -327,6 +339,9 @@ The SearchstaxPaginationWidget displays pagination controls for search results.
 <SearchstaxPaginationWidget></SearchstaxPaginationWidget>
 ```
 
+**Props**
+- paginationTemplate - template override for pagination widget
+
 **Main Template Override**
 
 Main template for the pagination controls.
@@ -379,7 +394,8 @@ Facet lists are configured and ordered on the Site Search [Faceting Tab](https:/
 - 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
+- facetsTemplateDesktop - template override for desktop view
+- facetsTemplateMobile - template override for mobile view
 
 
 **Main Template Desktop Override**
@@ -421,6 +437,10 @@ The SearchstaxFeedbackWidget displays search feedback and stats.
 <SearchstaxOverviewWidget></SearchstaxOverviewWidget>
 ```
 
+**Props**
+
+- searchOverviewTemplate - template override for search overview
+
 **Main Template Override**
 
 Main template for the search feedback message.
@@ -455,6 +475,12 @@ The SearchstaxRelatedSearchesWidget displays related searches.
               ></SearchstaxRelatedSearchesWidget>
 ```
 
+**Props**
+
+- relatedSearchesURL: // : An endpoint from the Discovery tab of the App Settings > All APls screen.
+- relatedSearchesAPIKey?: The Discovery API key from the Discovery tab of the App Settings > All
+- searchRelatedSearchesTemplate - template override for related searches
+
 **Main Template Override**
 
 Main template for related searches.
@@ -489,6 +515,10 @@ The SearchstaxExternalPromotionsWidget displays external promotions fetched from
 <SearchstaxExternalPromotionsWidget></SearchstaxExternalPromotionsWidget>
 ```
 
+**Props**
+
+- searchExternalPromotionsTemplate - template override for external promotions widget
+
 **Main Template Override**
 
 Main template for external promotions.
@@ -522,6 +552,10 @@ The SearchstaxSortingWidget displays sorting options for search results.
 <SearchstaxSortingWidget></SearchstaxSortingWidget>
 ```
 
+**Props**
+
+- searchSortingTemplate - template override for sorting widget
+
 **Main Template Override**
 
 Main template for sorting widget.

package/dist/@searchstax-inc/components/SearchstaxAnswerWidget.d.ts

@@ -2,6 +2,6 @@ import type { IFeedbackWidgetProperties, ISearchstaxAnswerData } from "@searchst
 declare function SearchstaxAnswerWidget(props: {
     searchAnswerTemplate?: (answerData: null | ISearchstaxAnswerData, showMore: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void) => React.ReactElement;
     feedbackwidget?: IFeedbackWidgetProperties;
-    showShowMoreAfterWordCount?: number;
+    showMoreAfterWordCount?: number;
 }): import("react/jsx-runtime").JSX.Element;
 export default SearchstaxAnswerWidget;

package/dist/@searchstax-inc/components/SearchstaxResultWidget.d.ts

@@ -2,6 +2,7 @@ import type { ISearchstaxParsedResult, ISearchstaxSearchMetadata } from "@search
 declare function SearchstaxResultWidget(props: {
     afterLinkClick: (results: ISearchstaxParsedResult) => ISearchstaxParsedResult;
     renderMethod?: "infiniteScroll" | "pagination";
+    resultsPerPage?: number;
     noResultTemplate?: (searchTerm: string, metaData: ISearchstaxSearchMetadata | null, executeSearch: (searchTerm: string) => void) => React.ReactElement;
     resultsTemplate?: (results: ISearchstaxParsedResult[], resultClicked: (result: ISearchstaxParsedResult, event: any) => any) => React.ReactElement;
 }): import("react/jsx-runtime").JSX.Element;