@redocly/theme 0.35.1 → 0.35.2

package/lib/components/Catalog/useCatalog.d.ts

@@ -2,3 +2,6 @@ import type { ResolvedNavItem } from '../../types/portal';
 import type { FilteredCatalog } from '../../types/portal/src/shared/types/catalog';
 import type { CatalogConfig } from '../../config';
 export declare function useCatalog(items: ResolvedNavItem[], config: CatalogConfig): FilteredCatalog;
+export declare function fillSearchParams(filterProperty: string, filterValues: Set<string>, searchParams: URLSearchParams): URLSearchParams;
+export declare function handleFilterInput(filterTerm: string): URLSearchParams;
+export declare function getFilterValues(filterValues: any): Set<string>;

package/lib/components/Catalog/useCatalog.js

@@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useCatalog = void 0;
+exports.getFilterValues = exports.handleFilterInput = exports.fillSearchParams = exports.useCatalog = void 0;
 const React = __importStar(require("react"));
 const react_router_dom_1 = require("react-router-dom");
 const telemetry_1 = require("../../mocks/telemetry");
@@ -58,7 +58,10 @@ function useCatalog(items, config) {
             if (!(newFilterOptions instanceof Set))
                 return prev;
             if (newFilterOptions.has(option)) {
-                newFilterOptions.delete(option);
+                prev.forEach((element, _) => {
+                    if (element instanceof Set && element.has(option))
+                        element.delete(option);
+                });
             }
             else {
                 newFilterOptions.add(option);
@@ -86,34 +89,25 @@ function useCatalog(items, config) {
         telemetry_1.telemetry.send('catalog_filter_changed', { type: 'select' });
         window.scrollTo(0, 0);
     }, [filtersWithOptions]);
-    React.useEffect(() => {
+    const handleSearchParams = () => {
+        let newSearchParams = handleFilterInput(filterTerm);
         filtersState.forEach((filterValues, filterIdx) => {
             var _a;
             const filter = (_a = config.filters) === null || _a === void 0 ? void 0 : _a[filterIdx];
             if (!filter)
                 return;
-            searchParams.delete(filter.property);
-            if (filterValues instanceof Set) {
-                filterValues.forEach((value) => {
-                    searchParams.append(filter.property, value);
-                });
-            }
-            else if (filterValues.from || filterValues.to) {
-                searchParams.append(filter.property, `${filterValues.from || ''}--${filterValues.to || ''}`);
-                return;
-            }
+            const values = getFilterValues(filterValues);
+            newSearchParams = fillSearchParams(filter.property, values, newSearchParams);
         });
-        if (filterTerm) {
-            searchParams.set('filter', filterTerm);
-        }
-        else {
-            searchParams.delete('filter');
-        }
-        const newSearch = searchParams.toString();
+        const newSearch = newSearchParams.toString();
         if (newSearch === location.search.substring(1))
             return;
         navigate({ search: newSearch });
-    }, [config.filters, searchParams, filtersState, filterTerm, navigate, location]);
+    };
+    React.useEffect(() => {
+        handleSearchParams();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [config.filters, filtersState, filterTerm, navigate, location]);
     // filterParents[i] is a Set with indexes of parents of this filter
     const filterParents = React.useMemo(() => collectFilterParents(config.filters), [config.filters]);
     return React.useMemo(() => {
@@ -314,4 +308,30 @@ function mapFilterValues(value, mapping) {
         ? value.map((v) => mapping[String(v)] || v)
         : mapping[String(value)] || value;
 }
+function fillSearchParams(filterProperty, filterValues, searchParams) {
+    filterValues.forEach((value) => {
+        if (!searchParams.has(filterProperty, value))
+            searchParams.append(filterProperty, value);
+    });
+    return searchParams;
+}
+exports.fillSearchParams = fillSearchParams;
+function handleFilterInput(filterTerm) {
+    const searchParams = new URLSearchParams();
+    if (filterTerm)
+        searchParams.set('filter', filterTerm);
+    else
+        searchParams.delete('filter');
+    return searchParams;
+}
+exports.handleFilterInput = handleFilterInput;
+function getFilterValues(filterValues) {
+    const values = new Set();
+    if (filterValues instanceof Set)
+        filterValues.forEach((value) => values.add(value));
+    else if (filterValues.from || filterValues.to)
+        values.add(`${filterValues.from || ''}--${filterValues.to || ''}`);
+    return values;
+}
+exports.getFilterValues = getFilterValues;
 //# sourceMappingURL=useCatalog.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.35.1",
+  "version": "0.35.2",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",

package/src/components/Catalog/useCatalog.ts

@@ -47,7 +47,9 @@ export function useCatalog(items: ResolvedNavItem[], config: CatalogConfig): Fil
       const newFilterOptions = prev[filterIdx] ? prev[filterIdx] : new Set<string>();
       if (!(newFilterOptions instanceof Set)) return prev;
       if (newFilterOptions.has(option)) {
-        newFilterOptions.delete(option);
+        prev.forEach((element, _) => {
+          if (element instanceof Set && element.has(option)) element.delete(option);
+        });
       } else {
         newFilterOptions.add(option);
       }
@@ -83,33 +85,25 @@ export function useCatalog(items: ResolvedNavItem[], config: CatalogConfig): Fil
     [filtersWithOptions],
   );
 
-  React.useEffect(() => {
+  const handleSearchParams = () => {
+    let newSearchParams = handleFilterInput(filterTerm);
+
     filtersState.forEach((filterValues, filterIdx) => {
       const filter = config.filters?.[filterIdx];
       if (!filter) return;
-      searchParams.delete(filter.property);
-      if (filterValues instanceof Set) {
-        filterValues.forEach((value) => {
-          searchParams.append(filter.property, value);
-        });
-      } else if (filterValues.from || filterValues.to) {
-        searchParams.append(
-          filter.property,
-          `${filterValues.from || ''}--${filterValues.to || ''}`,
-        );
-        return;
-      }
+      const values = getFilterValues(filterValues);
+      newSearchParams = fillSearchParams(filter.property, values, newSearchParams);
     });
 
-    if (filterTerm) {
-      searchParams.set('filter', filterTerm);
-    } else {
-      searchParams.delete('filter');
-    }
-    const newSearch = searchParams.toString();
+    const newSearch = newSearchParams.toString();
     if (newSearch === location.search.substring(1)) return;
     navigate({ search: newSearch });
-  }, [config.filters, searchParams, filtersState, filterTerm, navigate, location]);
+  };
+
+  React.useEffect(() => {
+    handleSearchParams();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [config.filters, filtersState, filterTerm, navigate, location]);
 
   // filterParents[i] is a Set with indexes of parents of this filter
   const filterParents = React.useMemo(() => collectFilterParents(config.filters), [config.filters]);
@@ -371,3 +365,34 @@ function mapFilterValues(value: unknown | unknown[], mapping?: Record<string, st
     ? value.map((v) => mapping[String(v)] || v)
     : mapping[String(value)] || value;
 }
+
+export function fillSearchParams(
+  filterProperty: string,
+  filterValues: Set<string>,
+  searchParams: URLSearchParams,
+) {
+  filterValues.forEach((value) => {
+    if (!searchParams.has(filterProperty, value)) searchParams.append(filterProperty, value);
+  });
+
+  return searchParams;
+}
+
+export function handleFilterInput(filterTerm: string) {
+  const searchParams = new URLSearchParams();
+
+  if (filterTerm) searchParams.set('filter', filterTerm);
+  else searchParams.delete('filter');
+
+  return searchParams;
+}
+
+export function getFilterValues(filterValues: any) {
+  const values = new Set<string>();
+
+  if (filterValues instanceof Set) filterValues.forEach((value) => values.add(value));
+  else if (filterValues.from || filterValues.to)
+    values.add(`${filterValues.from || ''}--${filterValues.to || ''}`);
+
+  return values;
+}