Version 1.3.0 (#381)

# Version 1.3.0

### Features
- Introduce new Facet components including the new Facets (#360), StandardFacet (#370), NumericalFacet (#375), and HierarchicalFacet (#373) components which support more customizability than the previous Facet components. 
- Support the new RichTextV2 (Lexical) and Markdown fields which have been converted to HTML as FeaturedSnippetDirectAnswers (#379)
- Remove the Yext logo from the search bar (#376)
- Deprecate LocationBias (#338) component in favor of the new Geolocation component (#336)

### Bug fixes
- Improve the UX of the search bar when long autocomplete text is returned which includes the truncation of long text (#378)

.github/workflows/coverage.yml

@@ -1,5 +1,5 @@
 # This workflow will run our tests, generate an lcov code coverage file,
-# and send that coverage to Coveralls 
+# and send that coverage to Coveralls
 
 name: Code Coverage
 

.github/workflows/sync-sites-branch.yml

@@ -6,21 +6,12 @@ on:
       - main
 
 jobs:
-  sync-branches:
-    runs-on: ubuntu-latest
-    name: Syncing branches
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-      - uses: devmasx/merge-branch@v1.4.0
-        with:
-          type: now
-          from_branch: ${{ github.event.repository.default_branch }}
-          target_branch: storybook-site
-          github_token: ${{ secrets.GITHUB_TOKEN }}
-      - uses: devmasx/merge-branch@v1.4.0
-        with:
-          type: now
-          from_branch: ${{ github.event.repository.default_branch }}
-          target_branch: test-site
-          github_token: ${{ secrets.GITHUB_TOKEN }}
+  call_sync_branches:
+    strategy:
+      matrix:
+        target_branch: ["storybook-site", "test-site"]
+    uses: yext/slapshot-reusable-workflows/.github/workflows/sync_default_branch.yml@v1
+    with:
+      target_branch: ${{ matrix.target_branch }}
+    secrets:
+      caller_github_token: ${{ secrets.GITHUB_TOKEN }}

.storybook/main.js

@@ -3,6 +3,7 @@ module.exports = {
     '../tests/**/*.stories.tsx'
   ],
   addons: [
+    '@etchteam/storybook-addon-status',
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',

.storybook/preview.js

@@ -27,6 +27,10 @@ export const parameters = {
         'DirectAnswer',
         'FilterSearch',
         'StaticFilters',
+        'Facets',
+        'StandardFacet',
+        'NumericalFacet',
+        'HierarchicalFacet',
         'StandardFacets',
         'NumericalFacets',
         'HierarchicalFacets',
@@ -36,6 +40,7 @@ export const parameters = {
         'AlternativeVerticals',
         'SpellCheck',
         'ResultsCount',
+        'Geolocation',
         'LocationBias',
         'Dropdown'
       ]

README.md

@@ -78,4 +78,8 @@ To use the Component Library's Styling without adding Tailwind to your project,
 
 ```tsx
 import '@yext/search-ui-react/bundle.css'
-```
+```
+
+## Compatibility Notes
+
+This library and its dependencies use optional chaining and other modern TS syntax that is not inherently supported by Webpack <5 (e.g. via `create-react-app@4`). Additional Babel plugins are needed for transpiling if using legacy versions.

THIRD-PARTY-NOTICES

@@ -979,7 +979,7 @@ These definitions were written by Chi Vinh Le <https://github.com/cvle>.
 
 The following NPM package may be included in this product:
 
- - @yext/analytics@0.2.0-beta.3
+ - @yext/analytics@0.5.0
 
 This package contains the following license and notice below:
 
@@ -1020,7 +1020,7 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
 The following NPM package may be included in this product:
 
- - @yext/search-core@2.3.0
+ - @yext/search-core@2.4.0
 
 This package contains the following license and notice below:
 
@@ -1064,7 +1064,7 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
 The following NPM package may be included in this product:
 
- - @yext/search-headless-react@2.2.0
+ - @yext/search-headless-react@2.3.0
 
 This package contains the following license and notice below:
 
@@ -1108,7 +1108,7 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
 The following NPM package may be included in this product:
 
- - @yext/search-headless@2.3.0
+ - @yext/search-headless@2.4.0
 
 This package contains the following license and notice below:
 

docs/search-ui-react.facetprops.md

@@ -0,0 +1,15 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@yext/search-ui-react](./search-ui-react.md) &gt; [FacetProps](./search-ui-react.facetprops.md)
+
+## FacetProps type
+
+Props for a single facet component.
+
+<b>Signature:</b>
+
+```typescript
+export declare type FacetProps = StandardFacetProps | NumericalFacetProps | HierarchicalFacetProps;
+```
+<b>References:</b> [StandardFacetProps](./search-ui-react.standardfacetprops.md)<!-- -->, [NumericalFacetProps](./search-ui-react.numericalfacetprops.md)<!-- -->, [HierarchicalFacetProps](./search-ui-react.hierarchicalfacetprops.md)
+

docs/search-ui-react.facets.md

@@ -0,0 +1,30 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@yext/search-ui-react](./search-ui-react.md) &gt; [Facets](./search-ui-react.facets.md)
+
+## Facets() function
+
+A component that displays all facets applicable to the current vertical search.
+
+<b>Signature:</b>
+
+```typescript
+export declare function Facets(props: FacetsProps): JSX.Element;
+```
+
+## Parameters
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  props | [FacetsProps](./search-ui-react.facetsprops.md) | [FacetsProps](./search-ui-react.facetsprops.md) |
+
+<b>Returns:</b>
+
+JSX.Element
+
+A React component for facets
+
+## Remarks
+
+This component is a quick way of getting facets on the page, and it will render standard facets, numerical facets, and hierarchical facets. The [StandardFacet()](./search-ui-react.standardfacet.md)<!-- -->, [NumericalFacet()](./search-ui-react.numericalfacet.md)<!-- -->, and [HierarchicalFacet()](./search-ui-react.hierarchicalfacet.md) components can be used to override the default facet configuration.
+

docs/search-ui-react.facetscssclasses.divider.md

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@yext/search-ui-react](./search-ui-react.md) &gt; [FacetsCssClasses](./search-ui-react.facetscssclasses.md) &gt; [divider](./search-ui-react.facetscssclasses.divider.md)
+
+## FacetsCssClasses.divider property
+
+<b>Signature:</b>
+
+```typescript
+divider?: string;
+```

docs/search-ui-react.facetscssclasses.facetscontainer.md

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@yext/search-ui-react](./search-ui-react.md) &gt; [FacetsCssClasses](./search-ui-react.facetscssclasses.md) &gt; [facetsContainer](./search-ui-react.facetscssclasses.facetscontainer.md)
+
+## FacetsCssClasses.facetsContainer property
+
+<b>Signature:</b>
+
+```typescript
+facetsContainer?: string;
+```

docs/search-ui-react.facetscssclasses.md

@@ -0,0 +1,22 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@yext/search-ui-react](./search-ui-react.md) &gt; [FacetsCssClasses](./search-ui-react.facetscssclasses.md)
+
+## FacetsCssClasses interface
+
+The CSS class interface for [Facets()](./search-ui-react.facets.md)<!-- -->. Any [FilterGroupCssClasses](./search-ui-react.filtergroupcssclasses.md) props will be overridden by the same props from customCssClasses on [StandardFacetProps](./search-ui-react.standardfacetprops.md)<!-- -->, [NumericalFacetProps](./search-ui-react.numericalfacetprops.md)<!-- -->, or [HierarchicalFacetProps](./search-ui-react.hierarchicalfacetprops.md)<!-- -->.
+
+<b>Signature:</b>
+
+```typescript
+export interface FacetsCssClasses extends FilterGroupCssClasses 
+```
+<b>Extends:</b> [FilterGroupCssClasses](./search-ui-react.filtergroupcssclasses.md)
+
+## Properties
+
+|  Property | Type | Description |
+|  --- | --- | --- |
+|  [divider?](./search-ui-react.facetscssclasses.divider.md) | string | <i>(Optional)</i> |
+|  [facetsContainer?](./search-ui-react.facetscssclasses.facetscontainer.md) | string | <i>(Optional)</i> |
+

docs/search-ui-react.facetsprops.children.md

@@ -0,0 +1,18 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@yext/search-ui-react](./search-ui-react.md) &gt; [FacetsProps](./search-ui-react.facetsprops.md) &gt; [children](./search-ui-react.facetsprops.children.md)
+
+## FacetsProps.children property
+
+The custom facet components that will override the default rendering.
+
+<b>Signature:</b>
+
+```typescript
+children?: ReactElement[] | ReactElement | undefined | null;
+```
+
+## Remarks
+
+Supported components include [StandardFacet()](./search-ui-react.standardfacet.md)<!-- -->, [NumericalFacet()](./search-ui-react.numericalfacet.md)<!-- -->.
+

docs/search-ui-react.facetsprops.customcssclasses.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@yext/search-ui-react](./search-ui-react.md) &gt; [FacetsProps](./search-ui-react.facetsprops.md) &gt; [customCssClasses](./search-ui-react.facetsprops.customcssclasses.md)
+
+## FacetsProps.customCssClasses property
+
+CSS classes for customizing the component styling.
+
+<b>Signature:</b>
+
+```typescript
+customCssClasses?: FacetsCssClasses;
+```

docs/search-ui-react.facetsprops.excludedfieldids.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@yext/search-ui-react](./search-ui-react.md) &gt; [FacetsProps](./search-ui-react.facetsprops.md) &gt; [excludedFieldIds](./search-ui-react.facetsprops.excludedfieldids.md)
+
+## FacetsProps.excludedFieldIds property
+
+List of field ids that should not be displayed.
+
+<b>Signature:</b>
+
+```typescript
+excludedFieldIds?: string[];
+```

docs/search-ui-react.facetsprops.hierarchicalfieldids.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@yext/search-ui-react](./search-ui-react.md) &gt; [FacetsProps](./search-ui-react.facetsprops.md) &gt; [hierarchicalFieldIds](./search-ui-react.facetsprops.hierarchicalfieldids.md)
+
+## FacetsProps.hierarchicalFieldIds property
+
+List of field ids that should be rendered as hierarchical facets.
+
+<b>Signature:</b>
+
+```typescript
+hierarchicalFieldIds?: string[];
+```

docs/search-ui-react.facetsprops.md

@@ -0,0 +1,25 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@yext/search-ui-react](./search-ui-react.md) &gt; [FacetsProps](./search-ui-react.facetsprops.md)
+
+## FacetsProps interface
+
+Props for the [Facets()](./search-ui-react.facets.md) component.
+
+<b>Signature:</b>
+
+```typescript
+export interface FacetsProps 
+```
+
+## Properties
+
+|  Property | Type | Description |
+|  --- | --- | --- |
+|  [children?](./search-ui-react.facetsprops.children.md) | ReactElement\[\] \| ReactElement \| undefined \| null | <i>(Optional)</i> The custom facet components that will override the default rendering. |
+|  [customCssClasses?](./search-ui-react.facetsprops.customcssclasses.md) | [FacetsCssClasses](./search-ui-react.facetscssclasses.md) | <i>(Optional)</i> CSS classes for customizing the component styling. |
+|  [excludedFieldIds?](./search-ui-react.facetsprops.excludedfieldids.md) | string\[\] | <i>(Optional)</i> List of field ids that should not be displayed. |
+|  [hierarchicalFieldIds?](./search-ui-react.facetsprops.hierarchicalfieldids.md) | string\[\] | <i>(Optional)</i> List of field ids that should be rendered as hierarchical facets. |
+|  [onlyRenderChildren?](./search-ui-react.facetsprops.onlyrenderchildren.md) | boolean | <i>(Optional)</i> If set to true, only the facets specified in the children are rendered. If set to false, all facets are rendered with the ones specified in the children overridden. Default to false. |
+|  [searchOnChange?](./search-ui-react.facetsprops.searchonchange.md) | boolean | <i>(Optional)</i> Whether or not a search is automatically run when a filter is selected. Defaults to true. |
+

docs/search-ui-react.facetsprops.onlyrenderchildren.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@yext/search-ui-react](./search-ui-react.md) &gt; [FacetsProps](./search-ui-react.facetsprops.md) &gt; [onlyRenderChildren](./search-ui-react.facetsprops.onlyrenderchildren.md)
+
+## FacetsProps.onlyRenderChildren property
+
+If set to true, only the facets specified in the children are rendered. If set to false, all facets are rendered with the ones specified in the children overridden. Default to false.
+
+<b>Signature:</b>
+
+```typescript
+onlyRenderChildren?: boolean;
+```

docs/search-ui-react.facetsprops.searchonchange.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@yext/search-ui-react](./search-ui-react.md) &gt; [FacetsProps](./search-ui-react.facetsprops.md) &gt; [searchOnChange](./search-ui-react.facetsprops.searchonchange.md)
+
+## FacetsProps.searchOnChange property
+
+Whether or not a search is automatically run when a filter is selected. Defaults to true.
+
+<b>Signature:</b>
+
+```typescript
+searchOnChange?: boolean;
+```

docs/search-ui-react.geolocation_2.md

@@ -0,0 +1,26 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@yext/search-ui-react](./search-ui-react.md) &gt; [Geolocation\_2](./search-ui-react.geolocation_2.md)
+
+## Geolocation\_2() function
+
+A React Component which collects location information to create a location filter and perform a new search.
+
+<b>Signature:</b>
+
+```typescript
+export declare function Geolocation({ geolocationOptions, radius, label, GeolocationIcon, handleClick, customCssClasses, }: GeolocationProps): JSX.Element | null;
+```
+
+## Parameters
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  { geolocationOptions, radius, label, GeolocationIcon, handleClick, customCssClasses, } | [GeolocationProps](./search-ui-react.geolocationprops.md) |  |
+
+<b>Returns:</b>
+
+JSX.Element \| null
+
+A react component for geolocation
+

docs/search-ui-react.geolocationcssclasses.button.md

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@yext/search-ui-react](./search-ui-react.md) &gt; [GeolocationCssClasses](./search-ui-react.geolocationcssclasses.md) &gt; [button](./search-ui-react.geolocationcssclasses.button.md)
+
+## GeolocationCssClasses.button property
+
+<b>Signature:</b>
+
+```typescript
+button?: string;
+```

docs/search-ui-react.geolocationcssclasses.geolocationcontainer.md

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@yext/search-ui-react](./search-ui-react.md) &gt; [GeolocationCssClasses](./search-ui-react.geolocationcssclasses.md) &gt; [geolocationContainer](./search-ui-react.geolocationcssclasses.geolocationcontainer.md)
+
+## GeolocationCssClasses.geolocationContainer property
+
+<b>Signature:</b>
+
+```typescript
+geolocationContainer?: string;
+```

docs/search-ui-react.geolocationcssclasses.iconcontainer.md

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@yext/search-ui-react](./search-ui-react.md) &gt; [GeolocationCssClasses](./search-ui-react.geolocationcssclasses.md) &gt; [iconContainer](./search-ui-react.geolocationcssclasses.iconcontainer.md)
+
+## GeolocationCssClasses.iconContainer property
+
+<b>Signature:</b>
+
+```typescript
+iconContainer?: string;
+```