Implementation of filters in custom search modal.

package.json

@@ -55,6 +55,7 @@
     "humanize-duration": "^3.30.0",
     "infima": "^0.2.0-alpha.43",
     "plugin-image-zoom": "flexanalytics/plugin-image-zoom",
+    "prop-types": "^15.8.1",
     "raw-loader": "^4.0.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",

src/theme/Footer/index.tsx

@@ -1,22 +1,20 @@
-/**
- * SWIZZLED VERSION: 2.0.0-rc.1
- * REASONS:
- *  - The socials bar needed full width, so needed to be placed outside the default container.
- */
-
 import React from 'react';
 import Footer from '@theme-original/Footer';
-import type FooterType from '@theme/Footer';
-import type { WrapperProps } from '@docusaurus/types';
 import Social from '@site/src/components/Social';
 
-type Props = WrapperProps<typeof FooterType>;
+type FooterProps = {
+  footerStyleProps?: React.CSSProperties;
+};
 
-export default function FooterWrapper(props: Props): JSX.Element {
+const FooterWrapper = ({ footerStyleProps }: FooterProps) => {
   return (
-    <>
-      <Footer {...props} />
-      <Social />
-    </>
+    <div>
+      <div style={footerStyleProps}>
+        <Footer />
+        <Social />
+      </div>
+    </div>
   );
-}
+};
+
+export default FooterWrapper;

src/theme/Layout/Provider/index.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { composeProviders } from '@docusaurus/theme-common';
+import {
+  ColorModeProvider,
+  AnnouncementBarProvider,
+  DocsPreferredVersionContextProvider,
+  ScrollControllerProvider,
+  NavbarProvider,
+  PluginHtmlClassNameProvider,
+} from '@docusaurus/theme-common/internal';
+
+const Provider = composeProviders([
+  ColorModeProvider,
+  AnnouncementBarProvider,
+  ScrollControllerProvider,
+  DocsPreferredVersionContextProvider,
+  PluginHtmlClassNameProvider,
+  NavbarProvider,
+]);
+
+function LayoutProvider({ children }) {
+  return <Provider>{children}</Provider>;
+}
+
+LayoutProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default LayoutProvider;

src/theme/Layout/index.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import ErrorBoundary from '@docusaurus/ErrorBoundary';
+import {
+  PageMetadata,
+  SkipToContentFallbackId,
+  ThemeClassNames,
+} from '@docusaurus/theme-common';
+import { useKeyboardNavigation } from '@docusaurus/theme-common/internal';
+import SkipToContent from '@theme/SkipToContent';
+import AnnouncementBar from '@theme/AnnouncementBar';
+import Navbar from '@theme/Navbar';
+import Footer from '@theme/Footer';
+import LayoutProvider from '@theme/Layout/Provider';
+import ErrorPageContent from '@theme/ErrorPageContent';
+import styles from './styles.module.css';
+
+export default function Layout(props) {
+  const {
+    children,
+    noFooter,
+    wrapperClassName,
+    footerStyleProps,
+    title,
+    description,
+  } = props;
+
+  useKeyboardNavigation();
+
+  return (
+    <LayoutProvider>
+      <PageMetadata title={title} description={description} />
+
+      <SkipToContent />
+
+      <AnnouncementBar />
+
+      <Navbar />
+
+      <div
+        id={SkipToContentFallbackId}
+        className={clsx(
+          ThemeClassNames.wrapper.main,
+          styles.mainWrapper,
+          wrapperClassName,
+        )}
+      >
+        <ErrorBoundary fallback={(params) => <ErrorPageContent {...params} />}>
+          {children}
+        </ErrorBoundary>
+      </div>
+
+      {!noFooter && <Footer footerStyleProps={footerStyleProps} />}
+    </LayoutProvider>
+  );
+}
+
+Layout.propTypes = {
+  children: PropTypes.node.isRequired,
+  noFooter: PropTypes.bool,
+  wrapperClassName: PropTypes.string,
+  footerStyleProps: PropTypes.object,
+  title: PropTypes.string,
+  description: PropTypes.string,
+};

src/theme/Layout/styles.module.css

@@ -0,0 +1,21 @@
+html,
+body {
+  height: 100%;
+}
+
+.mainWrapper {
+  flex: 1 0 auto;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Docusaurus-specific utility class */
+:global(.docusaurus-mt-lg) {
+  margin-top: 3rem;
+}
+
+:global(#__docusaurus) {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+}

src/theme/Root.js

@@ -0,0 +1,12 @@
+/* eslint-disable */
+
+import React from 'react';
+import { SearchProvider } from '@site/src/utils/SearchContext';
+
+export default function Root({ children }) {
+  return (
+    <SearchProvider>
+      <div>{children}</div>
+    </SearchProvider>
+  );
+}

src/theme/SearchBar/FilterDropdown.js

@@ -0,0 +1,168 @@
+/* eslint-disable */
+import React, { forwardRef, useEffect, useState } from 'react';
+import {
+  facetNamesJson,
+  allFacets,
+  subFilters,
+  subChildFilters,
+  buildSubFilters,
+  identitySubFilters,
+  maintainSubFilters,
+} from '../../utils/searchConstant';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+import { useAnnouncementBar } from '@docusaurus/theme-common/internal';
+
+export const FilterDropdown = forwardRef(
+  ({ selectedFacets, setSelectedFacets, styleProps = {} }, ref) => {
+    const { isActive: isAnnouncementBarActive } = useAnnouncementBar();
+    const actualFacets = allFacets[1];
+    const [isScrolled, setIsScrolled] = useState(false);
+
+    const handleCheckboxChange = (event) => {
+      const { value, checked } = event.target;
+      let updatedFacetList = checked
+        ? [...selectedFacets[1], value]
+        : selectedFacets[1].filter((facet) => facet !== value);
+
+      if (!checked && updatedFacetList.length === 0) {
+        return;
+      }
+
+      if (checked) {
+        // If a parent filter is checked, add its child filters
+        if (value === 'docusaurus_tag:docs-build-current') {
+          updatedFacetList = [
+            ...new Set([...updatedFacetList, ...buildSubFilters]),
+          ];
+        } else if (value === 'docusaurus_tag:docs-identity-rs-1-0-current') {
+          updatedFacetList = [
+            ...new Set([...updatedFacetList, ...identitySubFilters]),
+          ];
+        } else if (value === 'docusaurus_tag:docs-maintain-current') {
+          updatedFacetList = [
+            ...new Set([...updatedFacetList, ...maintainSubFilters]),
+          ];
+        }
+      } else {
+        // If a parent filter is unchecked, remove its child filters
+        if (value === 'docusaurus_tag:docs-build-current') {
+          updatedFacetList = updatedFacetList.filter(
+            (facet) => !buildSubFilters.includes(facet),
+          );
+        } else if (value === 'docusaurus_tag:docs-identity-rs-1-0-current') {
+          updatedFacetList = updatedFacetList.filter(
+            (facet) => !identitySubFilters.includes(facet),
+          );
+        } else if (value === 'docusaurus_tag:docs-maintain-current') {
+          updatedFacetList = updatedFacetList.filter(
+            (facet) => !maintainSubFilters.includes(facet),
+          );
+        }
+      }
+
+      setSelectedFacets([selectedFacets[0], updatedFacetList]);
+    };
+
+    const handleSelectAll = (event) => {
+      const checked = event.target.checked;
+      const updatedFacetList = checked ? actualFacets.slice() : [];
+      setSelectedFacets([selectedFacets[0], updatedFacetList]);
+    };
+
+    useEffect(() => {
+      // Check if all subfilters are selected, if yes, select the parent filter
+      const parentFilterStatus = {
+        'docusaurus_tag:docs-maintain-current': maintainSubFilters.every(
+          (facet) => selectedFacets[1].includes(facet),
+        ),
+        'docusaurus_tag:docs-build-current': buildSubFilters.every((facet) =>
+          selectedFacets[1].includes(facet),
+        ),
+        'docusaurus_tag:docs-identity-rs-1-0-current': identitySubFilters.every(
+          (facet) => selectedFacets[1].includes(facet),
+        ),
+      };
+
+      Object.keys(parentFilterStatus).forEach((parentFilter) => {
+        if (
+          parentFilterStatus[parentFilter] &&
+          !selectedFacets[1].includes(parentFilter)
+        ) {
+          setSelectedFacets((prevState) => [
+            prevState[0],
+            [...prevState[1], parentFilter],
+          ]);
+        }
+      });
+    }, [selectedFacets, setSelectedFacets]);
+
+    useEffect(() => {
+      const handleScroll = () => {
+        if (window.scrollY > 28) {
+          setIsScrolled(true);
+        }
+      };
+      handleScroll();
+    }, [window.scrollY]);
+
+    return (
+      <div
+        className={clsx('dropdown dropdown--hoverable', styles.dropdown, {
+          [styles.activeAnnouncementBar]: isAnnouncementBarActive,
+          [styles.isScrolled]: isScrolled,
+        })}
+        style={styleProps}
+        ref={ref}
+      >
+        <button
+          className={clsx(
+            'button button--primary button--outline',
+            styles.filterButton,
+          )}
+        >
+          filter
+        </button>
+        <ul className={clsx('dropdown__menu', styles.dropdownMenu)}>
+          <label>
+            <input
+              disabled={actualFacets.every((facet) =>
+                selectedFacets[1].includes(facet),
+              )}
+              type='checkbox'
+              onChange={handleSelectAll}
+              checked={actualFacets.every((facet) =>
+                selectedFacets[1].includes(facet),
+              )}
+            />
+            Select All
+          </label>
+          {actualFacets.map((facet, index) => (
+            <li key={index} className={clsx(styles.dropdownElements)}>
+              <label
+                className={
+                  subFilters.includes(facetNamesJson[facet])
+                    ? clsx(styles.subFilters)
+                    : subChildFilters.includes(facetNamesJson[facet])
+                    ? clsx(styles.subChildFilters)
+                    : ''
+                }
+              >
+                <input
+                  style={{ width: '10px' }}
+                  type='checkbox'
+                  value={facet}
+                  onChange={handleCheckboxChange}
+                  checked={selectedFacets[1].includes(facet)}
+                />
+                {facetNamesJson.hasOwnProperty(facet)
+                  ? facetNamesJson[facet]
+                  : facet.slice(15)}
+              </label>
+            </li>
+          ))}
+        </ul>
+      </div>
+    );
+  },
+);