Merge branch 'main' into dev/autocomplete-screen-reader

.eslintrc.js

@@ -19,5 +19,15 @@ module.exports = {
     }],
     '@typescript-eslint/semi': ['error'],
     '@typescript-eslint/type-annotation-spacing': ['error'],
+    '@typescript-eslint/member-delimiter-style': ['error', {
+      multiline: {
+        delimiter: 'comma',
+        requireLast: false
+      },
+      singleline: {
+        delimiter: 'comma',
+        requireLast: false
+      },
+    }]
   }
 };

THIRD-PARTY-NOTICES

@@ -278,6 +278,66 @@ SOFTWARE.
 
 -----------
 
+The following NPM package may be included in this product:
+
+ - js-tokens@4.0.0
+
+This package contains the following license and notice below:
+
+The MIT License (MIT)
+
+Copyright (c) 2014, 2015, 2016, 2017, 2018 Simon Lydell
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+-----------
+
+The following NPM package may be included in this product:
+
+ - loose-envify@1.4.0
+
+This package contains the following license and notice below:
+
+The MIT License (MIT)
+
+Copyright (c) 2015 Andres Suarez <zertosh@gmail.com>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+-----------
+
 The following NPM package may be included in this product:
 
  - node-fetch@2.6.1
@@ -308,6 +368,36 @@ SOFTWARE.
 
 -----------
 
+The following NPM package may be included in this product:
+
+ - object-assign@4.1.1
+
+This package contains the following license and notice below:
+
+The MIT License (MIT)
+
+Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+-----------
+
 The following NPM package may be included in this product:
 
  - react@17.0.2

__mocks__/styleMock.ts

@@ -0,0 +1 @@
+module.exports = {};

__mocks__/svgMock.tsx

@@ -0,0 +1,2 @@
+import * as React from 'react';
+module.exports = { ReactComponent: () => <svg></svg> };

package.json

@@ -28,7 +28,7 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.1.0",
     "@testing-library/user-event": "^13.2.1",
-    "@types/jest": "^27.0.1",
+    "@types/jest": "^27.0.2",
     "@typescript-eslint/eslint-plugin": "^4.28.5",
     "@typescript-eslint/parser": "^4.28.5",
     "eslint": "^7.32.0",
@@ -73,6 +73,11 @@
     "testEnvironment": "jsdom",
     "testMatch": [
       "<rootDir>/tests/**/*.(test).ts(x)?"
-    ]
+    ],
+    "moduleNameMapper": {
+      "@yext/answers-headless-react": "<rootDir>/src",
+      "\\.svg$": "<rootDir>/__mocks__/svgMock.tsx",
+      "\\.(css|scss)$": "<rootDir>/__mocks__/styleMock.ts"
+    }
   }
 }

react-app.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Allows TypeScript to correctly recognize the .svg module declarations,
+ * where svg can be used as a React component.
+ */
+declare module '*.svg' {
+  import * as React from 'react';
+
+  export const ReactComponent: React.FunctionComponent<React.SVGProps<
+    SVGSVGElement
+  > & { title?: string }>;
+
+  const src: string;
+  export default src;
+}

sample-app/package.json

@@ -84,13 +84,24 @@
     "start": "node scripts/start.js",
     "build": "node scripts/build.js",
     "test": "node scripts/test.js",
-    "postinstall": "./scripts/link-modules.sh"
+    "postinstall": "./scripts/link-modules.sh",
+    "eslint": "eslint"
   },
   "eslintConfig": {
-    "extends": "react-app",
+    "extends": ["react-app"],
     "rules": {
       "object-curly-spacing": ["error", "always"],
-      "indent": ["error", 2, { "SwitchCase": 1, "ignoreComments": true }]
+      "indent": ["error", 2, { "SwitchCase": 1, "ignoreComments": true }],
+      "@typescript-eslint/member-delimiter-style": ["error", {
+        "multiline": {
+          "delimiter": "comma",
+          "requireLast": false
+        },
+        "singleline": {
+          "delimiter": "comma",
+          "requireLast": false
+        }
+      }]
     }
   },
   "browserslist": {

sample-app/src/PageRouter.tsx

@@ -2,15 +2,15 @@ import { ComponentType } from 'react';
 import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
 
 interface RouteData {
-  path: string
-  page: JSX.Element
+  path: string,
+  page: JSX.Element,
   exact?: boolean
 }
 
 export type LayoutComponent = ComponentType<{ page: JSX.Element }>
 
 interface PageProps {
-  Layout?: LayoutComponent
+  Layout?: LayoutComponent,
   routes: RouteData[]
 }
 

sample-app/src/components/AlternativeVerticals.tsx

@@ -11,7 +11,7 @@ interface VerticalConfig {
 }
 
 interface VerticalSuggestion extends VerticalConfig {
-  resultsCount: number;
+  resultsCount: number
 }
 
 function isVerticalSuggestion (suggestion: VerticalSuggestion | null): suggestion is VerticalSuggestion {
@@ -21,7 +21,7 @@ function isVerticalSuggestion (suggestion: VerticalSuggestion | null): suggestio
 interface Props {
   currentVerticalLabel: string,
   verticalsConfig: VerticalConfig[],
-  displayAllResults?: boolean;
+  displayAllResults?: boolean
 }
 
 export default function AlternativeVerticals (props: Props): JSX.Element | null {

sample-app/src/components/AppliedFilters.tsx

@@ -1,6 +1,9 @@
 import { DisplayableFilter } from '../models/displayableFilter';
 import { GroupedFilters } from '../models/groupedFilters';
 import '../sass/AppliedFilters.scss';
+import { ReactComponent as CloseX } from '../icons/x.svg';
+import { useAnswersActions } from '@yext/answers-headless-react'
+import { isNearFilterValue } from '../utils/filterutils';
 
 interface Props {
   showFieldNames?: boolean,
@@ -12,7 +15,12 @@ interface Props {
 /**
  * Renders AppliedFilters component
  */
-export default function AppliedFilters({ showFieldNames, labelText, delimiter, appliedFilters }: Props): JSX.Element {
+export default function AppliedFilters({
+  showFieldNames,
+  labelText,
+  delimiter,
+  appliedFilters
+}: Props): JSX.Element {
   return (
     <div className="AppliedFilters" aria-label={labelText}>
       {appliedFilters.map((filterGroup: GroupedFilters, index: number) => {
@@ -39,12 +47,43 @@ function renderFilterLabel(label: string): JSX.Element {
 
 function renderAppliedFilters(filters: Array<DisplayableFilter>): JSX.Element {
   const filterElems = filters.map((filter: DisplayableFilter, index: number) => {
-    return (
-      <div className="AppliedFilters__filterValue" key={filter.label}>
-        <span className="AppliedFilters__filterValueText">{filter.label}</span>
-        {index < filters.length - 1 && <span className="AppliedFilters__filterValueComma">,</span>}
-      </div>
-    );
+    if (filter.filterType === 'NLP_FILTER') {
+      return (
+        <div className="AppliedFilters__filterValue" key={filter.label}>
+          <span className="AppliedFilters__filterValueText">{filter.label}</span>
+          {index < filters.length - 1 && <span className="AppliedFilters__filterValueComma">,</span>}
+        </div>
+      );
+    }
+    return <RemovableFilter filter={filter} key={filter.label}/>
   });
+
   return <>{filterElems}</>;
-}
+}
+
+function RemovableFilter({ filter }: {filter: DisplayableFilter }): JSX.Element {
+  const answersAction = useAnswersActions();
+
+  const onRemoveFacetOption = () => {
+    const { fieldId, matcher, value } = filter.filter;
+    if (isNearFilterValue(value)) {
+      console.error('A Filter with a NearFilterValue is not a supported RemovableFilter.');
+      return;
+    }
+    answersAction.unselectFacetOption(fieldId, { matcher, value });
+    answersAction.executeVerticalQuery();
+  }
+
+  const onRemoveStaticFilterOption = () => {
+    document.getElementById(`${filter.filter.fieldId + "_" + filter.filter.value}`)?.click();
+  }
+
+  const onRemoveFilter = filter.filterType === 'FACET' ? onRemoveFacetOption : onRemoveStaticFilterOption;
+
+  return (
+    <div className="AppliedFilters__filterValue AppliedFilters__removableFilter">
+      <span className="AppliedFilters__filterValueText">{filter.label}</span>
+      <div className='AppliedFilters__removeFilterButton' onClick={onRemoveFilter}><CloseX/></div>
+    </div>
+  );
+}

sample-app/src/components/DecoratedAppliedFilters.tsx

@@ -17,7 +17,8 @@ export interface DecoratedAppliedFiltersConfig {
  */
 export function DecoratedAppliedFiltersDisplay(props : DecoratedAppliedFiltersConfig): JSX.Element {
   const { hiddenFields = [], appliedQueryFilters = [], ...otherProps } = props;
-  const filterState = useAnswersState(state => state.filters);
+  const state = useAnswersState(state => state);
+  const filterState = state.vertical.results ? state.filters : {};
   const groupedFilters: Array<GroupedFilters> = getGroupedAppliedFilters(filterState, appliedQueryFilters, hiddenFields);
   return <AppliedFilters appliedFilters={groupedFilters} {...otherProps}/>
 }