@redocly/theme/src/core/hooks/search/use-search-dialog.ts

Shared UI components lib

import { useEffect, useCallback, useState } from 'react';
import { useLocation } from 'react-router-dom';
import hotkeys from 'hotkeys-js';

import { useThemeHooks, useThemeConfig } from '@redocly/theme/core/hooks';

export function useSearchDialog() {
  const [isOpen, setIsOpen] = useState(false);
  const themeSettings = useThemeConfig();
  const location = useLocation();
  const { useOtelTelemetry } = useThemeHooks();
  const otelTelemetry = useOtelTelemetry();
  const keyShortcuts = themeSettings?.search?.shortcuts ?? ['/'];
  const hotKeys = keyShortcuts?.join(',');

  useEffect(() => {
    if (hotKeys) {
      hotkeys(hotKeys, (ev) => {
        setIsOpen(true);
        otelTelemetry.send({ type: 'search.opened', payload: { method: 'shortcut' } });
        ev.preventDefault();
      });

      return () => hotkeys.unbind(hotKeys);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [hotKeys]);

  const onOpen = useCallback(function () {
    otelTelemetry.send({ type: 'search.opened', payload: { method: 'click' } });
    setIsOpen(true);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const onClose = useCallback(() => {
    setIsOpen(false);
  }, []);

  // eslint-disable-next-line react-hooks/exhaustive-deps
  useEffect(onClose, [location]);

  return { isOpen, onOpen, onClose };
}