@redocly/theme 0.70.0-next.8 → 0.70.0-next.9

package/src/core/hooks/search/use-persisted-quick-filter.ts

@@ -1,125 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-
-import type { Dispatch, SetStateAction } from 'react';
-import type { SearchFacet, SearchFilterItem } from '../../types/search';
-
-import { createStore, useStore } from '../use-store';
-
-type StoredQuickFilter = Pick<SearchFilterItem, 'field' | 'values'>;
-
-const quickFilterStore = createStore<StoredQuickFilter | null>({
-  storageKey: 'searchQuickFilter',
-  storageType: 'sessionStorage',
-});
-
-const findQuickFilter = (filter: SearchFilterItem[]) => filter.find((item) => item.isQuickFilter);
-
-const withQuickFilter = (filter: SearchFilterItem[], quickFilter: StoredQuickFilter) => [
-  ...filter.filter((item) => !item.isQuickFilter),
-  ...(quickFilter.values.length ? [{ ...quickFilter, isQuickFilter: true }] : []),
-];
-
-const groupFacetValues = (facets: SearchFacet[], field: string) => {
-  const facet = facets.find((item) => item.field === field);
-  const values = facet?.values ?? [];
-  return {
-    present: facet !== undefined,
-    values: values.map((item) => (typeof item === 'string' ? item : item.value)),
-    counted: values.some((item) => typeof item !== 'string' && item.isCounterVisible),
-  };
-};
-
-const isRestorable = (
-  stored: StoredQuickFilter | null,
-  groupField: string,
-): stored is StoredQuickFilter =>
-  !!stored &&
-  stored.field === groupField &&
-  Array.isArray(stored.values) &&
-  stored.values.length > 0 &&
-  stored.values.every((value) => typeof value === 'string');
-
-type UsePersistedQuickFilterOptions = {
-  filter: SearchFilterItem[];
-  setFilter: Dispatch<SetStateAction<SearchFilterItem[]>>;
-  facets: SearchFacet[];
-  groupField: string;
-  query: string;
-  isSearchLoading: boolean;
-  searchError: string | null;
-  enabled?: boolean;
-};
-
-/**
- * Remembers the quick filter on `groupField` for the browser tab and restores it on mount unless
- * one is already selected. Restored values are dropped once known not to exist: absent from the
- * full value list, or from the `groupField` facet left by the first search that finishes without
- * error on an empty query (the restored value is that search's filter, so a value without
- * documents is not counted). Does nothing while `enabled` is false.
- */
-export function usePersistedQuickFilter({
-  filter,
-  setFilter,
-  facets,
-  groupField,
-  query,
-  isSearchLoading,
-  searchError,
-  enabled = true,
-}: UsePersistedQuickFilterOptions): void {
-  const [stored, setStored] = useStore(quickFilterStore, null);
-  const [initial] = useState(() =>
-    enabled && isRestorable(stored, groupField) && !findQuickFilter(filter) ? stored.values : null,
-  );
-  const phaseRef = useRef<'restoring' | 'validating' | 'done'>(initial ? 'restoring' : 'done');
-  const searchedRef = useRef(false);
-
-  useEffect(() => {
-    if (!initial) return;
-    // oxlint-disable-next-line react-you-might-not-need-an-effect/no-pass-data-to-parent -- the filter state belongs to the product's `useSearch` and starts empty on every mount
-    setFilter((current) => withQuickFilter(current, { field: groupField, values: initial }));
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- applies only to the initial state
-  }, []);
-
-  useEffect(() => {
-    if (!enabled) return;
-    const quickFilter = findQuickFilter(filter);
-    // The commit that starts the restore still sees the empty initial filter.
-    if (phaseRef.current === 'restoring') {
-      if (!quickFilter) return;
-      phaseRef.current = 'validating';
-    }
-    if (phaseRef.current === 'validating' && initial) {
-      if (isSearchLoading) searchedRef.current = true;
-      const settled = searchedRef.current && !isSearchLoading && !searchError && !query.trim();
-      const { present, values: known, counted } = groupFacetValues(facets, groupField);
-      if ((known.length && !counted) || (settled && present)) {
-        phaseRef.current = 'done';
-        const values = quickFilter?.values.filter(
-          (value) => known.includes(value) || !initial.includes(value),
-        );
-        if (quickFilter && values && values.length !== quickFilter.values.length) {
-          // oxlint-disable-next-line react-you-might-not-need-an-effect/no-pass-data-to-parent -- the facets arrive after the restore
-          setFilter((current) => withQuickFilter(current, { field: groupField, values }));
-          return;
-        }
-      }
-    }
-    const next = quickFilter ? { field: quickFilter.field, values: quickFilter.values } : null;
-    if (JSON.stringify(next) !== JSON.stringify(stored)) {
-      setStored(next);
-    }
-  }, [
-    enabled,
-    filter,
-    facets,
-    groupField,
-    query,
-    isSearchLoading,
-    searchError,
-    initial,
-    stored,
-    setFilter,
-    setStored,
-  ]);
-}

package/src/core/hooks/search/use-recent-searches.ts

@@ -1,56 +0,0 @@
-import { useCallback } from 'react';
-
-import { createStore, useStore } from '../use-store';
-import { isBrowser } from '../../utils/js-utils';
-
-const RECENT_SEARCHES_KEY = 'recentSearches';
-const RECENT_SEARCHES_LIMIT = 5;
-
-const recentSearchesStore = createStore<string[]>({
-  storageKey: RECENT_SEARCHES_KEY,
-});
-
-export const useRecentSearches = (): {
-  items: string[];
-  addSearchHistoryItem: (value: string) => void;
-  removeSearchHistoryItem: (value: string) => void;
-} => {
-  const [items, setItems] = useStore<string[]>(recentSearchesStore, []);
-
-  const updateItems = useCallback(
-    (value: string, isAdd: boolean) => {
-      if (!isBrowser()) return;
-
-      const currentItems = [...items];
-      const valueIndex = currentItems.indexOf(value);
-      if (valueIndex !== -1) {
-        currentItems.splice(valueIndex, 1);
-      }
-
-      if (isAdd) {
-        currentItems.unshift(value);
-      }
-
-      const limitedItems = currentItems.slice(0, RECENT_SEARCHES_LIMIT);
-
-      setItems(limitedItems);
-    },
-    [items, setItems],
-  );
-
-  const addSearchHistoryItem = useCallback(
-    (value: string) => {
-      updateItems(value, true);
-    },
-    [updateItems],
-  );
-
-  const removeSearchHistoryItem = useCallback(
-    (value: string) => {
-      updateItems(value, false);
-    },
-    [updateItems],
-  );
-
-  return { items, addSearchHistoryItem, removeSearchHistoryItem };
-};

package/src/core/hooks/search/use-search-ai-activity.ts

@@ -1,31 +0,0 @@
-import type { SearchAiActivityStatus, SearchAiActivityStep, ToolCall } from '../../types/search';
-
-import { useThemeHooks } from '../use-theme-hooks';
-import { getSearchAiActivityStatus, getSearchAiActivityStep } from '../../utils/search-ai-activity';
-
-type UseSearchAiActivityParams = {
-  toolCalls: ToolCall[];
-  isActive: boolean;
-};
-
-type UseSearchAiActivityReturn = {
-  status: SearchAiActivityStatus;
-  steps: SearchAiActivityStep[];
-};
-
-export function useSearchAiActivity({
-  toolCalls,
-  isActive,
-}: UseSearchAiActivityParams): UseSearchAiActivityReturn {
-  const { useTranslate } = useThemeHooks();
-  const { translate } = useTranslate();
-
-  const runningToolCall = isActive ? toolCalls.find((toolCall) => !toolCall.result) : undefined;
-
-  return {
-    status: getSearchAiActivityStatus(toolCalls, isActive, runningToolCall, translate),
-    steps: toolCalls.map((toolCall) =>
-      getSearchAiActivityStep(toolCall, isActive && !toolCall.result, translate),
-    ),
-  };
-}

package/src/core/hooks/search/use-search-dialog.ts

@@ -1,59 +0,0 @@
-import { useEffect, useCallback, useState } from 'react';
-import { useLocation } from 'react-router';
-import hotkeys from 'hotkeys-js';
-
-import { useThemeHooks } from '../use-theme-hooks';
-import { useThemeConfig } from '../use-theme-config';
-import { useSearchSession } from '../../contexts';
-import { getBaseDataAttributes } from '../../utils';
-import { DEFAULT_KEYBOARD_SHORTCUTS } from '../../constants';
-
-export function useSearchDialog() {
-  const [isOpen, setIsOpen] = useState(false);
-  const themeSettings = useThemeConfig();
-  const location = useLocation();
-  const { useTelemetry } = useThemeHooks();
-  const telemetry = useTelemetry();
-  const { refreshSearchSessionId } = useSearchSession();
-  const keyShortcuts = themeSettings?.search?.shortcuts ?? [DEFAULT_KEYBOARD_SHORTCUTS];
-  const hotKeys = keyShortcuts?.join(',');
-
-  useEffect(() => {
-    if (hotKeys) {
-      hotkeys(hotKeys, (ev) => {
-        setIsOpen(true);
-        telemetry.sendSearchOpenedMessage([
-          {
-            ...getBaseDataAttributes('searchDialogId', 'search'),
-            method: 'shortcut',
-          },
-        ]);
-        ev.preventDefault();
-      });
-
-      return () => hotkeys.unbind(hotKeys);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [hotKeys]);
-
-  const onOpen = useCallback(function () {
-    telemetry.sendSearchOpenedMessage([
-      {
-        ...getBaseDataAttributes('searchDialogId', 'search'),
-        method: 'click',
-      },
-    ]);
-    setIsOpen(true);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const onClose = useCallback(() => {
-    refreshSearchSessionId();
-    setIsOpen(false);
-  }, [refreshSearchSessionId]);
-
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  useEffect(onClose, [location]);
-
-  return { isOpen, onOpen, onClose };
-}

package/src/core/hooks/search/use-search-filter.ts

@@ -1,61 +0,0 @@
-import { useCallback, useState } from 'react';
-
-import type { SearchFilterItem } from '../../types/search';
-
-export function useSearchFilter(
-  filter: SearchFilterItem[],
-  setFilter: React.Dispatch<React.SetStateAction<SearchFilterItem[]>>,
-) {
-  const [isFilterOpen, setIsFilterOpen] = useState(false);
-
-  const onFilterToggle = useCallback(() => {
-    setIsFilterOpen(!isFilterOpen);
-  }, [isFilterOpen]);
-
-  const onFilterChange = (
-    field: string,
-    value: string | string[] | undefined,
-    isQuickFilter?: boolean,
-  ) => {
-    const values = value ? (Array.isArray(value) ? value : [value]) : [];
-
-    const _filter = [...filter];
-    const fieldIndex = _filter.findIndex((filter) => filter.field === field);
-    if (fieldIndex > -1) {
-      // filter field already exists
-      _filter[fieldIndex].values = values;
-    } else {
-      if (!values.length) return;
-      _filter.push({ field, values, isQuickFilter });
-    }
-
-    setFilter(_filter.filter((item) => item.values.length));
-  };
-
-  const onFilterReset = () => {
-    setFilter([]);
-  };
-
-  const onQuickFilterReset = () => {
-    const _filter = [...filter];
-    setFilter(_filter.filter((item) => !item.isQuickFilter));
-  };
-
-  const onFacetReset = (field: string) => {
-    const _filter = [...filter];
-    const fieldIndex = _filter.findIndex((filter) => filter.field === field);
-    if (fieldIndex !== -1) {
-      _filter[fieldIndex].values = [];
-    }
-    setFilter(_filter.filter((item) => item.values.length));
-  };
-
-  return {
-    onFacetReset,
-    onFilterChange,
-    onFilterReset,
-    onFilterToggle,
-    onQuickFilterReset,
-    isFilterOpen,
-  };
-}

package/src/core/hooks/search/use-suggested-pages.ts

@@ -1,7 +0,0 @@
-import { useThemeConfig } from '../use-theme-config';
-
-export const useSuggestedPages = () => {
-  const themeSettings = useThemeConfig();
-  const suggestedPages = themeSettings.search?.suggestedPages;
-  return suggestedPages || [];
-};

package/src/core/hooks/use-active-heading.ts

@@ -1,355 +0,0 @@
-import { useState, useEffect, useRef, useCallback } from 'react';
-import { useLocation } from 'react-router';
-
-import { enhancedSmoothstep } from '../utils';
-import { HEADING_ANCHOR_CLASS } from '../constants';
-
-type HeadingEntry = {
-  [key: string]: IntersectionObserverEntry;
-};
-
-type ClickScroll = {
-  target: HTMLElement;
-  scrollMargin: number;
-  closestDistance: number;
-  reached: boolean;
-};
-
-const TARGET_TOLERANCE = 2;
-
-export function useActiveHeading(
-  contentElement: HTMLDivElement | null,
-  displayedHeadings?: Array<{ id: string; depth: number } | null>,
-): { heading: string | undefined; handleHeadingClick: (headingId: string) => void } {
-  const [heading, setHeading] = useState<string | undefined>(undefined);
-  const [headingElements, setHeadingElements] = useState<HTMLElement[]>([]);
-  const headingElementsRef = useRef<HeadingEntry>({});
-  const displayedHeadingsRef = useRef(displayedHeadings);
-  const lockObserver = useRef<boolean>(false);
-  const clickScroll = useRef<ClickScroll | null>(null);
-  const location = useLocation();
-
-  useEffect(() => {
-    setHeading(undefined);
-    headingElementsRef.current = {};
-    clickScroll.current = null;
-    lockObserver.current = false;
-  }, [location.pathname]);
-
-  useEffect(() => {
-    displayedHeadingsRef.current = displayedHeadings;
-  }, [displayedHeadings]);
-
-  const getVisibleHeadings = () => {
-    const visibleHeadings: IntersectionObserverEntry[] = [];
-
-    for (const key in headingElementsRef.current) {
-      const headingElement = headingElementsRef.current[key];
-
-      if (headingElement.isIntersecting) {
-        visibleHeadings.push(headingElement);
-      }
-    }
-
-    return visibleHeadings;
-  };
-
-  const isTopOfPage = () => window.scrollY <= 50;
-
-  // Returns viewport ratio for intersection observer based on screen height
-  const getViewportRatio = () => {
-    const vh = window.innerHeight;
-    if (vh >= 1400) return 0.4;
-    if (vh >= 1000) return 0.3;
-    return 0.25;
-  };
-
-  const getIndexFromId = useCallback(
-    (id: string) => {
-      return headingElements.findIndex((item) => item.id === id);
-    },
-    [headingElements],
-  );
-
-  const findHeaders = (allContent: HTMLDivElement) => {
-    const allHeaders = allContent.querySelectorAll<HTMLElement>(`.${HEADING_ANCHOR_CLASS}`);
-    const headers = Array.from(allHeaders);
-
-    if (displayedHeadingsRef.current && displayedHeadingsRef.current.length > 0) {
-      // Resolve targets by id so anchors that are not headings (e.g. numbered
-      // list items with a lifted headline) can be scrolled to and tracked.
-      return displayedHeadingsRef.current
-        .map((heading) =>
-          heading?.id ? allContent.querySelector<HTMLElement>(`[id="${heading.id}"]`) : null,
-        )
-        .filter((element): element is HTMLElement => element !== null);
-    }
-
-    return headers;
-  };
-
-  const calculateVirtualPositions = useCallback((headers: HTMLElement[]) => {
-    if (!headers.length) return {};
-
-    const navbarHeight = document.querySelector('nav')?.getBoundingClientRect().height || 0;
-    const viewportHeight = window.innerHeight;
-    const triggerOffset = navbarHeight + viewportHeight * 0.25;
-
-    const lastHeader = headers[headers.length - 1];
-    const lastHeaderTop = lastHeader.offsetTop;
-    const maxScrollableHeight = document.body.scrollHeight - viewportHeight;
-
-    const requiredUplift = Math.max(0, lastHeaderTop - maxScrollableHeight + triggerOffset);
-
-    const virtualPositions: Record<string, number> = {};
-
-    for (let i = 0; i < headers.length; i++) {
-      const header = headers[i];
-      const headerTop = header.offsetTop;
-
-      const normalizedPosition = headers.length === 1 ? 0 : i / (headers.length - 1);
-
-      const adjustmentFactor = enhancedSmoothstep(normalizedPosition, 0.4);
-
-      const uplift = requiredUplift * adjustmentFactor;
-      const virtualTop = headerTop - uplift;
-
-      virtualPositions[header.id] = virtualTop;
-    }
-
-    return virtualPositions;
-  }, []);
-
-  const getTriggerOffset = useCallback(() => {
-    const navbarHeight = document.querySelector('nav')?.getBoundingClientRect().height || 0;
-    return navbarHeight + window.innerHeight * getViewportRatio();
-  }, []);
-
-  const findActiveHeaderByVirtualPosition = useCallback(
-    (headers: HTMLElement[], scrollY: number, triggerOffset: number) => {
-      const virtualPositions = calculateVirtualPositions(headers);
-
-      let activeHeader = headers[0];
-      for (const header of headers) {
-        const virtualTop = virtualPositions[header.id] || header.offsetTop;
-        if (virtualTop <= scrollY + triggerOffset) {
-          activeHeader = header;
-        } else {
-          break;
-        }
-      }
-      return activeHeader;
-    },
-    [calculateVirtualPositions],
-  );
-
-  const intersectionCallback = useCallback(
-    (entries: IntersectionObserverEntry[]) => {
-      headingElementsRef.current = entries.reduce(
-        (map: HeadingEntry, entry: IntersectionObserverEntry) => {
-          map[entry.target.id] = entry;
-          return map;
-        },
-        headingElementsRef.current,
-      );
-
-      if (lockObserver.current) {
-        return;
-      }
-
-      if (isTopOfPage()) {
-        const newHeading = headingElements[0]?.id || undefined;
-        setHeading(newHeading);
-        return;
-      }
-
-      const visibleHeadings = getVisibleHeadings();
-      if (!visibleHeadings.length) {
-        const triggerOffset = getTriggerOffset();
-
-        if (isTopOfPage()) {
-          setHeading(headingElements[0]?.id || undefined);
-          return;
-        }
-
-        const totalHeight = window.scrollY + window.innerHeight;
-        if (totalHeight >= document.body.scrollHeight - 10) {
-          setHeading(headingElements[headingElements.length - 1]?.id || undefined);
-          return;
-        }
-
-        const activeHeader = findActiveHeaderByVirtualPosition(
-          headingElements,
-          window.scrollY,
-          triggerOffset,
-        );
-        setHeading(activeHeader.id);
-        return;
-      }
-
-      if (visibleHeadings.length === 1) {
-        setHeading(visibleHeadings[0].target.id);
-        return;
-      }
-
-      visibleHeadings.sort((a, b) => {
-        return getIndexFromId(a.target.id) - getIndexFromId(b.target.id);
-      });
-
-      const firstVisibleHeading = visibleHeadings[0];
-
-      if (getIndexFromId(firstVisibleHeading.target.id) === 0 && isTopOfPage()) {
-        setHeading(firstVisibleHeading.target.id);
-        return;
-      }
-
-      const totalHeight = scrollY + window.innerHeight;
-      if (totalHeight >= document.body.scrollHeight - 10) {
-        setHeading(visibleHeadings[visibleHeadings.length - 1].target.id);
-        return;
-      }
-
-      setHeading(visibleHeadings[0].target.id);
-    },
-    [getIndexFromId, headingElements, getTriggerOffset, findActiveHeaderByVirtualPosition],
-  );
-
-  const releaseClickScroll = useCallback(() => {
-    clickScroll.current = null;
-    lockObserver.current = false;
-  }, []);
-
-  const trackClickScroll = useCallback(() => {
-    const clickScrollState = clickScroll.current;
-    if (!clickScrollState) {
-      return;
-    }
-
-    const { top } = clickScrollState.target.getBoundingClientRect();
-
-    if (clickScrollState.reached) {
-      if (top >= 0 && top <= getTriggerOffset()) {
-        return;
-      }
-    } else {
-      const distance = Math.abs(top - clickScrollState.scrollMargin);
-
-      if (distance <= TARGET_TOLERANCE) {
-        clickScrollState.reached = true;
-        return;
-      }
-
-      if (distance <= clickScrollState.closestDistance + TARGET_TOLERANCE) {
-        clickScrollState.closestDistance = Math.min(clickScrollState.closestDistance, distance);
-        return;
-      }
-    }
-
-    releaseClickScroll();
-    intersectionCallback([]);
-  }, [releaseClickScroll, intersectionCallback, getTriggerOffset]);
-
-  const handleHeadingClick = useCallback(
-    (headingId: string) => {
-      releaseClickScroll();
-      setHeading(headingId);
-
-      const target =
-        document.getElementById(headingId) || headingElements.find((el) => el.id === headingId);
-
-      if (!target?.scrollIntoView) {
-        return;
-      }
-
-      target.scrollIntoView({ behavior: 'smooth', block: 'start' });
-
-      if (!target.getClientRects().length) {
-        return;
-      }
-
-      const scrollMargin = parseFloat(getComputedStyle(target).scrollMarginTop) || 0;
-      const distance = Math.abs(target.getBoundingClientRect().top - scrollMargin);
-
-      lockObserver.current = true;
-      clickScroll.current = {
-        target,
-        scrollMargin,
-        closestDistance: distance,
-        reached: distance <= TARGET_TOLERANCE,
-      };
-    },
-    [headingElements, releaseClickScroll],
-  );
-
-  useEffect(() => {
-    if (!contentElement) {
-      return;
-    }
-    const headers = findHeaders(contentElement);
-    // oxlint-disable-next-line react-you-might-not-need-an-effect/no-chain-state-updates -- headings and the initial active heading come from DOM queries and scroll measurement, available only after layout
-    setHeadingElements(headers);
-
-    if (headers.length > 0 && !heading) {
-      if (isTopOfPage()) {
-        // oxlint-disable-next-line react-you-might-not-need-an-effect/no-chain-state-updates -- see above
-        setHeading(headers[0].id);
-      } else {
-        const totalHeight = scrollY + window.innerHeight;
-        if (totalHeight >= document.body.scrollHeight - 10) {
-          // oxlint-disable-next-line react-you-might-not-need-an-effect/no-chain-state-updates -- see above
-          setHeading(headers[headers.length - 1]?.id || undefined);
-        } else {
-          const triggerOffset = getTriggerOffset();
-          const activeHeader = findActiveHeaderByVirtualPosition(headers, scrollY, triggerOffset);
-          // oxlint-disable-next-line react-you-might-not-need-an-effect/no-chain-state-updates -- see above
-          setHeading(activeHeader.id);
-        }
-      }
-    }
-  }, [
-    contentElement,
-    location,
-    heading,
-    calculateVirtualPositions,
-    getTriggerOffset,
-    findActiveHeaderByVirtualPosition,
-  ]);
-
-  useEffect(() => {
-    if (!headingElements?.length) {
-      return;
-    }
-    headingElementsRef.current = {};
-
-    const triggerOffset = getTriggerOffset();
-
-    const observer = new IntersectionObserver(intersectionCallback, {
-      rootMargin: `-${triggerOffset}px 0px -${window.innerHeight * getViewportRatio()}px 0px`,
-      threshold: [0, 0.1, 0.3, 0.5, 0.7, 1],
-    });
-
-    headingElements.forEach((element) => {
-      observer.observe(element);
-    });
-
-    const handleScroll = () => {
-      if (clickScroll.current) {
-        trackClickScroll();
-        return;
-      }
-
-      if (isTopOfPage()) {
-        setHeading(headingElements[0]?.id || undefined);
-      }
-    };
-
-    window.addEventListener('scroll', handleScroll, { passive: true });
-
-    return () => {
-      observer.disconnect();
-      window.removeEventListener('scroll', handleScroll);
-    };
-  }, [headingElements, intersectionCallback, getTriggerOffset, trackClickScroll]);
-
-  return { heading, handleHeadingClick };
-}