@docusaurus/theme-search-algolia 2.0.0-beta.16 → 2.0.0-beta.19

package/lib/client/useAlgoliaContextualFacetFilters.js

@@ -8,7 +8,7 @@ import {useContextualSearchFilters} from '@docusaurus/theme-common';
 // Translate search-engine agnostic search filters to Algolia search filters
 export function useAlgoliaContextualFacetFilters() {
   const {locale, tags} = useContextualSearchFilters();
-  // seems safe to convert locale->language, see AlgoliaSearchMetadata comment
+  // Seems safe to convert locale->language, see AlgoliaSearchMetadata comment
   const languageFilter = `language:${locale}`;
   const tagsFilter = tags.map((tag) => `docusaurus_tag:${tag}`);
   return [languageFilter, tagsFilter];

package/lib/index.js

@@ -8,16 +8,14 @@
 Object.defineProperty(exports, '__esModule', {value: true});
 exports.validateThemeConfig = void 0;
 const tslib_1 = require('tslib');
-const path_1 = (0, tslib_1.__importDefault)(require('path'));
-const fs_extra_1 = (0, tslib_1.__importDefault)(require('fs-extra'));
+const path_1 = tslib_1.__importDefault(require('path'));
+const fs_extra_1 = tslib_1.__importDefault(require('fs-extra'));
 const eta_1 = require('eta');
 const utils_1 = require('@docusaurus/utils');
 const theme_translations_1 = require('@docusaurus/theme-translations');
-const logger_1 = (0, tslib_1.__importDefault)(require('@docusaurus/logger'));
-const opensearch_1 = (0, tslib_1.__importDefault)(
-  require('./templates/opensearch'),
-);
-const lodash_1 = (0, tslib_1.__importDefault)(require('lodash'));
+const logger_1 = tslib_1.__importDefault(require('@docusaurus/logger'));
+const opensearch_1 = tslib_1.__importDefault(require('./templates/opensearch'));
+const lodash_1 = tslib_1.__importDefault(require('lodash'));
 const getCompiledOpenSearchTemplate = lodash_1.default.memoize(() =>
   (0, eta_1.compile)(opensearch_1.default.trim()),
 );
@@ -38,10 +36,10 @@ function themeSearchAlgolia(context) {
   return {
     name: 'docusaurus-theme-search-algolia',
     getThemePath() {
-      return path_1.default.resolve(__dirname, '../lib/theme');
+      return '../lib/theme';
     },
     getTypeScriptThemePath() {
-      return path_1.default.resolve(__dirname, '../src/theme');
+      return '../src/theme';
     },
     getDefaultCodeTranslationMessages() {
       return (0, theme_translations_1.readDefaultCodeTranslationMessages)({

package/lib/theme/SearchBar/index.js

@@ -15,7 +15,6 @@ import {isRegexpStringMatch, useSearchPage} from '@docusaurus/theme-common';
 import {DocSearchButton, useDocSearchKeyboardEvents} from '@docsearch/react';
 import {useAlgoliaContextualFacetFilters} from '@docusaurus/theme-search-algolia/client';
 import Translate, {translate} from '@docusaurus/Translate';
-import styles from './styles.module.css';
 let DocSearchModal = null;
 function Hit({hit, children}) {
   return <Link to={hit.url}>{children}</Link>;
@@ -37,22 +36,15 @@ function mergeFacetFilters(f1, f2) {
   return [...normalize(f1), ...normalize(f2)];
 }
 function DocSearch({contextualSearch, externalUrlRegex, ...props}) {
-  var _a, _b;
   const {siteMetadata} = useDocusaurusContext();
   const contextualSearchFacetFilters = useAlgoliaContextualFacetFilters();
-  const configFacetFilters =
-    (_b =
-      (_a = props.searchParameters) === null || _a === void 0
-        ? void 0
-        : _a.facetFilters) !== null && _b !== void 0
-      ? _b
-      : [];
+  const configFacetFilters = props.searchParameters?.facetFilters ?? [];
   const facetFilters = contextualSearch
     ? // Merge contextual search filters with config filters
       mergeFacetFilters(contextualSearchFacetFilters, configFacetFilters)
     : // ... or use config facetFilters
       configFacetFilters;
-  // we let user override default searchParameters if he wants to
+  // We let user override default searchParameters if she wants to
   const searchParameters = {
     ...props.searchParameters,
     facetFilters,
@@ -86,11 +78,8 @@ function DocSearch({contextualSearch, externalUrlRegex, ...props}) {
     });
   }, [importDocSearchModalIfNeeded, setIsOpen]);
   const onClose = useCallback(() => {
-    var _a;
     setIsOpen(false);
-    (_a = searchContainer.current) === null || _a === void 0
-      ? void 0
-      : _a.remove();
+    searchContainer.current?.remove();
   }, [setIsOpen]);
   const onInput = useCallback(
     (event) => {
@@ -169,19 +158,17 @@ function DocSearch({contextualSearch, externalUrlRegex, ...props}) {
         />
       </Head>
 
-      <div className={styles.searchBox}>
-        <DocSearchButton
-          onTouchStart={importDocSearchModalIfNeeded}
-          onFocus={importDocSearchModalIfNeeded}
-          onMouseOver={importDocSearchModalIfNeeded}
-          onClick={onOpen}
-          ref={searchButtonRef}
-          translations={{
-            buttonText: translatedSearchLabel,
-            buttonAriaLabel: translatedSearchLabel,
-          }}
-        />
-      </div>
+      <DocSearchButton
+        onTouchStart={importDocSearchModalIfNeeded}
+        onFocus={importDocSearchModalIfNeeded}
+        onMouseOver={importDocSearchModalIfNeeded}
+        onClick={onOpen}
+        ref={searchButtonRef}
+        translations={{
+          buttonText: translatedSearchLabel,
+          buttonAriaLabel: translatedSearchLabel,
+        }}
+      />
 
       {isOpen &&
         DocSearchModal &&

package/lib/theme/SearchPage/index.js

@@ -13,6 +13,7 @@ import Head from '@docusaurus/Head';
 import Link from '@docusaurus/Link';
 import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
 import {
+  HtmlClassNameProvider,
   useTitleFormatter,
   usePluralForm,
   isRegexpStringMatch,
@@ -109,7 +110,7 @@ function SearchVersionSelectList({docsSearchVersionsHelpers}) {
     </div>
   );
 }
-export default function SearchPage() {
+function SearchPageContent() {
   const {
     siteConfig: {themeConfig},
     i18n: {currentLocale},
@@ -173,7 +174,7 @@ export default function SearchPage() {
   algoliaHelper.on(
     'result',
     ({results: {query, hits, page, nbHits, nbPages}}) => {
-      if (query === '' || !(hits instanceof Array)) {
+      if (query === '' || !Array.isArray(hits)) {
         searchResultStateDispatcher({type: 'reset'});
         return;
       }
@@ -293,7 +294,7 @@ export default function SearchPage() {
     makeSearch(searchResultState.lastPage);
   }, [makeSearch, searchResultState.lastPage]);
   return (
-    <Layout wrapperClassName="search-page-wrapper">
+    <Layout>
       <Head>
         <title>{useTitleFormatter(getTitle())}</title>
         {/*
@@ -453,3 +454,10 @@ export default function SearchPage() {
     </Layout>
   );
 }
+export default function SearchPage() {
+  return (
+    <HtmlClassNameProvider className="search-page-wrapper">
+      <SearchPageContent />
+    </HtmlClassNameProvider>
+  );
+}

package/lib/validateThemeConfig.d.ts

@@ -5,14 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { Joi } from '@docusaurus/utils-validation';
-import type { ThemeConfig, Validate, ValidationResult } from '@docusaurus/types';
+import type { ThemeConfig, ThemeConfigValidationContext } from '@docusaurus/types';
 export declare const DEFAULT_CONFIG: {
     contextualSearch: boolean;
     searchParameters: {};
     searchPagePath: string;
 };
 export declare const Schema: Joi.ObjectSchema<any>;
-export declare function validateThemeConfig({ validate, themeConfig, }: {
-    validate: Validate<ThemeConfig>;
-    themeConfig: ThemeConfig;
-}): ValidationResult<ThemeConfig>;
+export declare function validateThemeConfig({ validate, themeConfig, }: ThemeConfigValidationContext<ThemeConfig>): ThemeConfig;

package/lib/validateThemeConfig.js

@@ -9,7 +9,7 @@ Object.defineProperty(exports, '__esModule', {value: true});
 exports.validateThemeConfig = exports.Schema = exports.DEFAULT_CONFIG = void 0;
 const utils_validation_1 = require('@docusaurus/utils-validation');
 exports.DEFAULT_CONFIG = {
-  // enabled by default, as it makes sense in most cases
+  // Enabled by default, as it makes sense in most cases
   // see also https://github.com/facebook/docusaurus/issues/5880
   contextualSearch: true,
   searchParameters: {},

package/package.json

@@ -1,8 +1,11 @@
 {
   "name": "@docusaurus/theme-search-algolia",
-  "version": "2.0.0-beta.16",
+  "version": "2.0.0-beta.19",
   "description": "Algolia search component for Docusaurus.",
   "main": "lib/index.js",
+  "sideEffects": [
+    "*.css"
+  ],
   "exports": {
     "./client": "./lib/client/index.js",
     ".": "./lib/index.js"
@@ -26,23 +29,24 @@
   },
   "dependencies": {
     "@docsearch/react": "^3.0.0",
-    "@docusaurus/core": "2.0.0-beta.16",
-    "@docusaurus/logger": "2.0.0-beta.16",
-    "@docusaurus/theme-common": "2.0.0-beta.16",
-    "@docusaurus/theme-translations": "2.0.0-beta.16",
-    "@docusaurus/utils": "2.0.0-beta.16",
-    "@docusaurus/utils-validation": "2.0.0-beta.16",
-    "algoliasearch": "^4.12.1",
-    "algoliasearch-helper": "^3.7.0",
+    "@docusaurus/core": "2.0.0-beta.19",
+    "@docusaurus/logger": "2.0.0-beta.19",
+    "@docusaurus/plugin-content-docs": "2.0.0-beta.19",
+    "@docusaurus/theme-common": "2.0.0-beta.19",
+    "@docusaurus/theme-translations": "2.0.0-beta.19",
+    "@docusaurus/utils": "2.0.0-beta.19",
+    "@docusaurus/utils-validation": "2.0.0-beta.19",
+    "algoliasearch": "^4.13.0",
+    "algoliasearch-helper": "^3.8.2",
     "clsx": "^1.1.1",
     "eta": "^1.12.3",
-    "fs-extra": "^10.0.1",
+    "fs-extra": "^10.1.0",
     "lodash": "^4.17.21",
-    "tslib": "^2.3.1",
+    "tslib": "^2.4.0",
     "utility-types": "^3.10.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "2.0.0-beta.16"
+    "@docusaurus/module-type-aliases": "2.0.0-beta.19"
   },
   "peerDependencies": {
     "react": "^16.8.4 || ^17.0.0",
@@ -51,5 +55,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "eb43c4d4f95a4fb97dc9bb9dc615413e0dc2e1e7"
+  "gitHead": "a71e60a49cce93c1006ef10c41ac03187f057102"
 }

package/src/client/useAlgoliaContextualFacetFilters.ts

@@ -11,7 +11,7 @@ import {useContextualSearchFilters} from '@docusaurus/theme-common';
 export function useAlgoliaContextualFacetFilters(): [string, string[]] {
   const {locale, tags} = useContextualSearchFilters();
 
-  // seems safe to convert locale->language, see AlgoliaSearchMetadata comment
+  // Seems safe to convert locale->language, see AlgoliaSearchMetadata comment
   const languageFilter = `language:${locale}`;
 
   const tagsFilter = tags.map((tag) => `docusaurus_tag:${tag}`);

package/src/index.ts

@@ -47,10 +47,10 @@ export default function themeSearchAlgolia(context: LoadContext): Plugin<void> {
     name: 'docusaurus-theme-search-algolia',
 
     getThemePath() {
-      return path.resolve(__dirname, '../lib/theme');
+      return '../lib/theme';
     },
     getTypeScriptThemePath() {
-      return path.resolve(__dirname, '../src/theme');
+      return '../src/theme';
     },
 
     getDefaultCodeTranslationMessages() {

package/src/theme/SearchBar/index.tsx

@@ -14,9 +14,9 @@ import Link from '@docusaurus/Link';
 import Head from '@docusaurus/Head';
 import {isRegexpStringMatch, useSearchPage} from '@docusaurus/theme-common';
 import {DocSearchButton, useDocSearchKeyboardEvents} from '@docsearch/react';
+import type {SearchClient} from 'algoliasearch/lite';
 import {useAlgoliaContextualFacetFilters} from '@docusaurus/theme-search-algolia/client';
 import Translate, {translate} from '@docusaurus/Translate';
-import styles from './styles.module.css';
 
 import type {
   DocSearchModal as DocSearchModalType,
@@ -99,7 +99,7 @@ function DocSearch({
     : // ... or use config facetFilters
       configFacetFilters;
 
-  // we let user override default searchParameters if he wants to
+  // We let user override default searchParameters if she wants to
   const searchParameters: DocSearchProps['searchParameters'] = {
     ...props.searchParameters,
     facetFilters,
@@ -145,7 +145,7 @@ function DocSearch({
   }, [setIsOpen]);
 
   const onInput = useCallback(
-    (event) => {
+    (event: KeyboardEvent) => {
       importDocSearchModalIfNeeded().then(() => {
         setIsOpen(true);
         setInitialQuery(event.key);
@@ -194,7 +194,7 @@ function DocSearch({
     );
 
   const transformSearchClient = useCallback(
-    (searchClient) => {
+    (searchClient: SearchClient) => {
       searchClient.addAlgoliaAgent(
         'docusaurus',
         siteMetadata.docusaurusVersion,
@@ -232,19 +232,17 @@ function DocSearch({
         />
       </Head>
 
-      <div className={styles.searchBox}>
-        <DocSearchButton
-          onTouchStart={importDocSearchModalIfNeeded}
-          onFocus={importDocSearchModalIfNeeded}
-          onMouseOver={importDocSearchModalIfNeeded}
-          onClick={onOpen}
-          ref={searchButtonRef}
-          translations={{
-            buttonText: translatedSearchLabel,
-            buttonAriaLabel: translatedSearchLabel,
-          }}
-        />
-      </div>
+      <DocSearchButton
+        onTouchStart={importDocSearchModalIfNeeded}
+        onFocus={importDocSearchModalIfNeeded}
+        onMouseOver={importDocSearchModalIfNeeded}
+        onClick={onOpen}
+        ref={searchButtonRef}
+        translations={{
+          buttonText: translatedSearchLabel,
+          buttonAriaLabel: translatedSearchLabel,
+        }}
+      />
 
       {isOpen &&
         DocSearchModal &&

package/src/theme/SearchPage/index.tsx

@@ -17,6 +17,7 @@ import Head from '@docusaurus/Head';
 import Link from '@docusaurus/Link';
 import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
 import {
+  HtmlClassNameProvider,
   useTitleFormatter,
   usePluralForm,
   isRegexpStringMatch,
@@ -53,15 +54,16 @@ function useDocsSearchVersionsHelpers() {
 
   // State of the version select menus / algolia facet filters
   // docsPluginId -> versionName map
-  const [searchVersions, setSearchVersions] = useState<Record<string, string>>(
-    () =>
-      Object.entries(allDocsData).reduce(
-        (acc, [pluginId, pluginData]) => ({
-          ...acc,
-          [pluginId]: pluginData.versions[0].name,
-        }),
-        {},
-      ),
+  const [searchVersions, setSearchVersions] = useState<{
+    [pluginId: string]: string;
+  }>(() =>
+    Object.entries(allDocsData).reduce(
+      (acc, [pluginId, pluginData]) => ({
+        ...acc,
+        [pluginId]: pluginData.versions[0]!.name,
+      }),
+      {},
+    ),
   );
 
   // Set the value of a single select menu
@@ -149,7 +151,7 @@ type ResultDispatcher =
   | {type: 'update'; value: ResultDispatcherState}
   | {type: 'advance'; value?: undefined};
 
-export default function SearchPage(): JSX.Element {
+function SearchPageContent(): JSX.Element {
   const {
     siteConfig: {themeConfig},
     i18n: {currentLocale},
@@ -218,7 +220,7 @@ export default function SearchPage(): JSX.Element {
   algoliaHelper.on(
     'result',
     ({results: {query, hits, page, nbHits, nbPages}}) => {
-      if (query === '' || !(hits instanceof Array)) {
+      if (query === '' || !Array.isArray(hits)) {
         searchResultStateDispatcher({type: 'reset'});
         return;
       }
@@ -277,7 +279,7 @@ export default function SearchPage(): JSX.Element {
           const {
             isIntersecting,
             boundingClientRect: {y: currentY},
-          } = entries[0];
+          } = entries[0]!;
 
           if (isIntersecting && prevY.current > currentY) {
             searchResultStateDispatcher({type: 'advance'});
@@ -356,7 +358,7 @@ export default function SearchPage(): JSX.Element {
   }, [makeSearch, searchResultState.lastPage]);
 
   return (
-    <Layout wrapperClassName="search-page-wrapper">
+    <Layout>
       <Head>
         <title>{useTitleFormatter(getTitle())}</title>
         {/*
@@ -516,3 +518,11 @@ export default function SearchPage(): JSX.Element {
     </Layout>
   );
 }
+
+export default function SearchPage(): JSX.Element {
+  return (
+    <HtmlClassNameProvider className="search-page-wrapper">
+      <SearchPageContent />
+    </HtmlClassNameProvider>
+  );
+}

package/src/theme-search-algolia.d.ts

@@ -15,7 +15,7 @@ declare module '@docusaurus/theme-search-algolia' {
       appId: string;
       apiKey: string;
       indexName: string;
-      searchParameters: Record<string, unknown>;
+      searchParameters: {[key: string]: unknown};
       searchPagePath: string | false | null;
     };
   };

package/src/validateThemeConfig.ts

@@ -6,10 +6,13 @@
  */
 
 import {Joi} from '@docusaurus/utils-validation';
-import type {ThemeConfig, Validate, ValidationResult} from '@docusaurus/types';
+import type {
+  ThemeConfig,
+  ThemeConfigValidationContext,
+} from '@docusaurus/types';
 
 export const DEFAULT_CONFIG = {
-  // enabled by default, as it makes sense in most cases
+  // Enabled by default, as it makes sense in most cases
   // see also https://github.com/facebook/docusaurus/issues/5880
   contextualSearch: true,
 
@@ -45,9 +48,6 @@ export const Schema = Joi.object({
 export function validateThemeConfig({
   validate,
   themeConfig,
-}: {
-  validate: Validate<ThemeConfig>;
-  themeConfig: ThemeConfig;
-}): ValidationResult<ThemeConfig> {
+}: ThemeConfigValidationContext<ThemeConfig>): ThemeConfig {
   return validate(Schema, themeConfig);
 }

package/lib/theme/SearchBar/styles.module.css

@@ -1,20 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-@media (max-width: 996px) {
-  .searchBox {
-    position: absolute;
-    right: var(--ifm-navbar-padding-horizontal);
-  }
-}
-
-@media (min-width: 997px) {
-  .searchBox {
-    padding: var(--ifm-navbar-item-padding-vertical)
-      var(--ifm-navbar-item-padding-horizontal);
-  }
-}

package/src/theme/SearchBar/styles.module.css

@@ -1,20 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-@media (max-width: 996px) {
-  .searchBox {
-    position: absolute;
-    right: var(--ifm-navbar-padding-horizontal);
-  }
-}
-
-@media (min-width: 997px) {
-  .searchBox {
-    padding: var(--ifm-navbar-item-padding-vertical)
-      var(--ifm-navbar-item-padding-horizontal);
-  }
-}