@redocly/theme 0.0.0-react18-20231120182601

package/src/hooks/__tests__/mocks/MockIntersectionObserver.ts

@@ -0,0 +1,48 @@
+export class MockIntersectionObserver {
+  public readonly root: Element | Document | null;
+  public readonly rootMargin: string;
+  public readonly thresholds: ReadonlyArray<number>;
+
+  private viewPort: any;
+  private entries: any[];
+  private readonly callback: IntersectionObserverCallback;
+
+  constructor(callback: IntersectionObserverCallback, options?: IntersectionObserverInit) {
+    this.viewPort = options?.root ? options.root : window;
+    this.entries = [];
+    this.root = null;
+    this.rootMargin = '0px';
+    this.thresholds = [1];
+    this.callback = callback;
+
+    this.viewPort.addEventListener('scroll', this.intersect);
+  }
+
+  private intersect = () => {
+    this.entries.map((entry) => {
+      entry.isIntersecting = this.isInViewPort(entry.target);
+    });
+    this.callback(this.entries, this);
+  };
+
+  isInViewPort(target: HTMLElement): boolean {
+    return target.id !== 'toc-0';
+  }
+
+  observe(target: HTMLElement): void {
+    this.entries.push({ isIntersecting: false, target });
+  }
+
+  unobserve(target: HTMLElement): void {
+    this.entries = this.entries.filter((ob) => ob.target !== target);
+  }
+
+  disconnect(): void {
+    this.viewPort.removeEventListener('scroll', this.intersect);
+    this.entries = [];
+  }
+
+  takeRecords(): any[] {
+    return this.entries;
+  }
+}

package/src/hooks/index.ts

@@ -0,0 +1,9 @@
+export * from '@theme/hooks/useThemeConfig';
+export * from '@theme/hooks/useControl';
+export * from '@theme/hooks/useMount';
+export * from '@theme/hooks/useUnmount';
+export * from '@theme/hooks/useActiveHeading';
+export * from '@theme/hooks/useActiveSectionId';
+export * from '@theme/hooks/useFullHeight';
+export * from '@theme/hooks/useNavbarHeight';
+export * from '@theme/hooks/useOutsideClick';

package/src/hooks/useActiveHeading.ts

@@ -0,0 +1,110 @@
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { useLocation } from 'react-router-dom';
+export type UseActiveHeadingReturnType = string | undefined;
+
+type HeadingEntry = {
+  [key: string]: IntersectionObserverEntry;
+};
+
+export function useActiveHeading(
+  contentElement: HTMLDivElement | null,
+  displayedHeaders: Array<string | undefined>,
+): UseActiveHeadingReturnType {
+  const [heading, setHeading] = useState<string | undefined>(
+    displayedHeaders.length > 1 ? displayedHeaders[0] : undefined,
+  );
+  const [headingElements, setHeadingElements] = useState<HTMLElement[]>([]);
+  const headingElementsRef = useRef<HeadingEntry>({});
+  const location = useLocation();
+
+  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 getIndexFromId = useCallback(
+    (id: string) => {
+      return headingElements.findIndex((item) => item.id === id);
+    },
+    [headingElements],
+  );
+
+  const findHeaders = (allContent: HTMLDivElement) => {
+    const allHeaders = allContent.querySelectorAll<HTMLElement>('.heading-anchor');
+    return Array.from(allHeaders);
+  };
+
+  const intersectionCallback = useCallback(
+    (headings: IntersectionObserverEntry[]) => {
+      headingElementsRef.current = headings.reduce(
+        (map: HeadingEntry, headingElement: IntersectionObserverEntry) => {
+          map[headingElement.target.id] = headingElement;
+          return map;
+        },
+        headingElementsRef.current,
+      );
+
+      const totalHeight = window.scrollY + window.innerHeight;
+      // handle bottom of the page
+      if (totalHeight >= document.body.scrollHeight) {
+        const newHeading = headingElements[headingElements?.length - 1]?.id || undefined;
+        setHeading(newHeading);
+        return;
+      }
+
+      const visibleHeadings = getVisibleHeadings();
+      if (!visibleHeadings.length) {
+        return;
+      }
+
+      if (visibleHeadings.length === 1) {
+        setHeading(visibleHeadings[0].target.id);
+        return;
+      }
+
+      visibleHeadings.sort((a, b) => {
+        return getIndexFromId(a.target.id) - getIndexFromId(b.target.id);
+      });
+      setHeading(visibleHeadings[0].target.id);
+    },
+    [getIndexFromId, headingElements],
+  );
+
+  useEffect(() => {
+    if (!contentElement) {
+      return;
+    }
+    setHeadingElements(findHeaders(contentElement));
+  }, [contentElement, location]);
+
+  useEffect(() => {
+    if (!headingElements?.length) {
+      return;
+    }
+    headingElementsRef.current = {};
+
+    // Bottom rootMargin -30% changes part of the view where IntersectionObserver starts to detect headers
+    const observer = new IntersectionObserver(intersectionCallback, {
+      rootMargin: '0px 0px -30% 0px',
+      threshold: 1,
+    });
+    headingElements?.forEach((element) => {
+      if (displayedHeaders.includes(element.id)) {
+        observer.observe(element);
+      }
+    });
+
+    return () => observer.disconnect();
+  }, [headingElements, displayedHeaders, intersectionCallback]);
+
+  return heading;
+}

package/src/hooks/useActiveSectionId.ts

@@ -0,0 +1,54 @@
+import { useEffect, useState, useMemo } from 'react';
+import throttle from 'lodash.throttle';
+
+import type { Location } from 'react-router-dom';
+
+import { useNavbarHeight } from '@theme/hooks/useNavbarHeight';
+
+export type UseActiveSectionIdReturnType = string;
+
+export function useActiveSectionId(
+  location: Location,
+  hasOverviewPage = false,
+  withNavbar = true,
+): UseActiveSectionIdReturnType {
+  const [itemId, setItemId] = useState<string>('');
+  const navbarHeight = useNavbarHeight(location);
+  const heightOffset = (withNavbar ? navbarHeight : 0) + 5; // use small padding 5px to account for rounding;
+
+  const scrollListener = useMemo(
+    () =>
+      throttle(() => {
+        const sections = document.querySelectorAll('[data-section-id]');
+        if (sections.length < 2) {
+          setItemId('');
+          return;
+        }
+        for (let i = 0; i < sections.length; i++) {
+          const section = sections[i];
+          const rect = section.getBoundingClientRect();
+          if (rect.y < heightOffset && rect.bottom > heightOffset) {
+            setItemId(section.getAttribute('data-section-id') || '');
+            return;
+          }
+        }
+        if (hasOverviewPage) {
+          setItemId('');
+        }
+      }, 150),
+    [heightOffset, hasOverviewPage],
+  );
+
+  useEffect(() => {
+    window.addEventListener('scroll', scrollListener, { capture: false });
+    setTimeout(() => {
+      scrollListener();
+    }, 10);
+
+    return () => {
+      window.removeEventListener('scroll', scrollListener);
+    };
+  }, [location, heightOffset, scrollListener]);
+
+  return itemId;
+}

package/src/hooks/useControl.ts

@@ -0,0 +1,20 @@
+import { useState, useCallback } from 'react';
+
+export type UseControlReturnType = {
+  isOpened: boolean;
+  handleOpen: () => void;
+  handleClose: () => void;
+};
+
+export const useControl = (initialVal = false): UseControlReturnType => {
+  const [isOpened, setIsOpened] = useState<boolean>(initialVal);
+
+  const handleOpen = useCallback(() => setIsOpened(true), []);
+  const handleClose = useCallback(() => setIsOpened(false), []);
+
+  return {
+    isOpened,
+    handleOpen,
+    handleClose,
+  };
+};

package/src/hooks/useDialogHotKeys.ts

@@ -0,0 +1,48 @@
+import { useEffect, useRef } from 'react';
+
+import type { MutableRefObject } from 'react';
+
+export function useDialogHotKeys(
+  ref: MutableRefObject<HTMLElement | null>,
+  onClose: () => void,
+): void {
+  const firstFocusableRef = useRef<HTMLElement>();
+  const lastFocusableRef = useRef<HTMLElement>();
+
+  const onKeyDownHandler = (event: KeyboardEvent) => {
+    if (event.key === 'Escape') {
+      onClose();
+    } else if (event.key === 'Tab') {
+      if (!event.shiftKey && document.activeElement === lastFocusableRef.current) {
+        event.preventDefault();
+        firstFocusableRef.current?.focus();
+      } else if (event.shiftKey && document.activeElement === firstFocusableRef.current) {
+        event.preventDefault();
+        lastFocusableRef.current?.focus();
+      }
+    }
+  };
+
+  const onFocusableElementsHandler = () => {
+    const focusableElements = ref.current?.querySelectorAll(
+      'input, [href], [tabindex]:not([tabindex="-1"])',
+    );
+    if (focusableElements && focusableElements.length > 0) {
+      firstFocusableRef.current = focusableElements[0] as HTMLElement;
+      lastFocusableRef.current = focusableElements[focusableElements.length - 1] as HTMLElement;
+      firstFocusableRef.current?.focus();
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('keydown', onKeyDownHandler);
+    return () => {
+      document.removeEventListener('keydown', onKeyDownHandler);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    onFocusableElementsHandler();
+  });
+}

package/src/hooks/useFullHeight.ts

@@ -0,0 +1,49 @@
+import { useCallback, useEffect, useMemo } from 'react';
+import throttle from 'lodash.throttle';
+
+import type { MutableRefObject } from 'react';
+
+export function useFullHeight(element: MutableRefObject<HTMLElement | null>): void {
+  const handler = useCallback(() => {
+    if (!element.current) {
+      return;
+    }
+
+    const footer = document.querySelector('footer');
+    if (!footer) {
+      return;
+    }
+
+    const elementTop = element.current.getBoundingClientRect().top;
+    const footerOffset = footer.offsetTop - window.scrollY - elementTop;
+    if (footerOffset > window.innerHeight) {
+      element.current.style.maxHeight = `${window.innerHeight - elementTop}px`;
+    } else {
+      element.current.style.maxHeight = `${footerOffset}px`;
+    }
+  }, [element]);
+
+  const throttledHandler = useMemo(() => throttle(handler, 150), [handler]);
+
+  useEffect(() => {
+    if (typeof window === 'undefined' || !element.current) {
+      return () => {
+        // nope
+      };
+    }
+
+    window.addEventListener('scroll', throttledHandler, {
+      capture: false,
+    });
+    window.addEventListener('resize', throttledHandler, {
+      capture: false,
+    });
+
+    handler();
+
+    return () => {
+      window.removeEventListener('scroll', throttledHandler);
+      window.removeEventListener('resize', throttledHandler);
+    };
+  }, [throttledHandler, element, handler]);
+}

package/src/hooks/useMobileMenu.ts

@@ -0,0 +1,16 @@
+import { useEffect, useState } from 'react';
+import { useLocation } from 'react-router-dom';
+
+import type { Dispatch, SetStateAction } from 'react';
+
+import useModalScrollLock from '@theme/hooks/useModalScrollLock';
+
+export function useMobileMenu(initialState = false): [boolean, Dispatch<SetStateAction<boolean>>] {
+  const location = useLocation();
+  const [isOpen, setIsOpen] = useState(initialState);
+
+  useEffect(() => setIsOpen(false), [location.pathname, location.hash]);
+  useModalScrollLock(isOpen);
+
+  return [isOpen, setIsOpen];
+}

package/src/hooks/useModalScrollLock.ts

@@ -0,0 +1,12 @@
+import { useEffect } from 'react';
+
+export default function useModalScrollLock(isOpen: boolean) {
+  useEffect(() => {
+    if (isOpen) document.body.classList.add('overflow-hidden');
+    else document.body.classList.remove('overflow-hidden');
+  }, [isOpen]);
+
+  return () => {
+    document.body.classList.remove('overflow-hidden');
+  };
+}

package/src/hooks/useMount.ts

@@ -0,0 +1,8 @@
+import { useEffect } from 'react';
+
+export const useMount = (callback: () => void): void => {
+  useEffect(() => {
+    callback();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+};

package/src/hooks/useNavbarHeight.ts

@@ -0,0 +1,25 @@
+import { useEffect, useState } from 'react';
+
+import type { Location } from 'react-router-dom';
+
+import { getNavbarElement } from '@theme/utils/getNavbarElement';
+
+export type UseNavbarHeightReturnType = number;
+
+export function useNavbarHeight(location: Location): UseNavbarHeightReturnType {
+  const [height, setHeight] = useState(0);
+
+  useEffect(() => {
+    const navbar = getNavbarElement();
+    setHeight((navbar && navbar.clientHeight) || 0);
+  }, [location.pathname]);
+
+  useEffect(() => {
+    window.requestAnimationFrame(() => {
+      const navbar = getNavbarElement();
+      setHeight((navbar && navbar.clientHeight) || 0);
+    });
+  }, []);
+
+  return height;
+}

package/src/hooks/useOutsideClick.ts

@@ -0,0 +1,23 @@
+import { useEffect } from 'react';
+
+import type { MutableRefObject } from 'react';
+
+export function useOutsideClick(
+  ref: MutableRefObject<HTMLElement | null>,
+  handler: (event: MouseEvent | TouchEvent) => void,
+): void {
+  useEffect(() => {
+    const listener = (event: MouseEvent | TouchEvent) => {
+      if (!ref.current || ref.current.contains(event.target as Node)) {
+        return;
+      }
+      handler(event);
+    };
+    document.addEventListener('mousedown', listener);
+    document.addEventListener('touchstart', listener);
+    return () => {
+      document.removeEventListener('mousedown', listener);
+      document.removeEventListener('touchstart', listener);
+    };
+  }, [ref, handler]);
+}

package/src/hooks/useThemeConfig.ts

@@ -0,0 +1,24 @@
+import { createContext, useContext } from 'react';
+
+import type { ThemeUIConfig } from '@theme/config';
+import { useCurrentProduct } from '@portal/hooks';
+
+export const ThemeConfigContext = createContext<ThemeUIConfig>({} as ThemeUIConfig);
+
+export function useThemeConfig<T extends Record<string, unknown>>(
+  useProductConfig: boolean = true,
+): T & NonNullable<ThemeUIConfig> {
+  const themeConfig = (useContext(ThemeConfigContext) as T & NonNullable<ThemeUIConfig>) || {};
+
+  const currentProduct = useCurrentProduct();
+
+  const mergedTheme =
+    useProductConfig && currentProduct?.themeOverride
+      ? {
+          ...themeConfig,
+          ...currentProduct.themeOverride,
+        }
+      : themeConfig;
+
+  return mergedTheme;
+}

package/src/hooks/useUnmount.ts

@@ -0,0 +1,10 @@
+import { useEffect } from 'react';
+
+export const useUnmount = (callback: () => void): void => {
+  useEffect(() => {
+    return () => {
+      callback();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+};

package/src/i18n/LanguagePicker.tsx

@@ -0,0 +1,120 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { getPathnameForLocale, withPathPrefix } from '@portal/utils';
+import { usePreloadHistory } from '@portal/usePreloadHistory';
+import { useI18nConfig } from '@portal/hooks';
+import { Select, SelectInput, SelectList, SelectListItem } from '@theme/components/Select';
+import { LanguageIcon } from '@theme/icons';
+
+interface LanguagePickerProps {
+  onChangeLanguage: (newLang: string) => void;
+  onlyIcon?: boolean;
+  placement?: 'top' | 'bottom';
+  alignment?: 'start' | 'end';
+}
+
+export const LanguagePicker = (props: LanguagePickerProps) => {
+  const { currentLocale, locales, defaultLocale } = useI18nConfig();
+  const history = usePreloadHistory();
+
+  if (locales.length < 2) {
+    return null;
+  }
+
+  const locale = locales.find((l) => l.code === currentLocale);
+  if (!locale) {
+    return null;
+  }
+
+  const value = locale.code;
+  const languageItems = locales.map((locale) => ({
+    element: <LanguageItem role="link">{locale.name || locale.code || ''}</LanguageItem>,
+    value: locale.code,
+    title: locale.name || locale.code || '',
+  }));
+
+  return (
+    <LanguageSelect
+      value={value}
+      options={languageItems}
+      onChange={(value: string) => {
+        const newLangPathname = withPathPrefix(
+          getPathnameForLocale(location.pathname, defaultLocale, value, locales),
+        );
+        const newUrlWithLanguage = `${newLangPathname}${location.search}${location.hash}`;
+        history.push(newUrlWithLanguage);
+        props.onChangeLanguage(value);
+      }}
+      triggerEvent="hover"
+      placement={props.placement}
+      alignment={props.alignment}
+      icon={<LanguageIcon />}
+      onlyIcon={props.onlyIcon}
+      withArrow={false}
+    />
+  );
+};
+
+const LanguageSelect = styled(Select).attrs(() => ({
+  dataAttributes: {
+    'data-component-name': 'i18n/LanguagePicker',
+  },
+}))`
+  --select-list-item-active-background-color: var(
+    --language-picker-list-item-active-background-color
+  );
+  --select-list-item-hover-background-color: var(
+    --language-picker-list-item-hover-background-color
+  );
+
+  display: none;
+  font-size: var(--language-picker-font-size);
+  font-weight: var(--language-picker-font-weight);
+  line-height: var(--language-picker-line-height);
+  border-radius: var(--language-picker-border-radius);
+  color: var(--language-picker-text-color);
+  background-color: var(--language-picker-background-color);
+
+  ${SelectInput} {
+    min-height: var(--language-picker-min-height);
+    color: var(--language-picker-text-color);
+    border: 1px solid var(--language-picker-border-color);
+    border-radius: var(--language-picker-input-border-radius);
+    padding: var(--language-picker-input-padding-vertical)
+      var(--language-picker-input-padding-horizontal);
+
+    :hover {
+      border-color: var(--language-picker-hover-border-color);
+    }
+  }
+
+  ${SelectList} {
+    min-width: var(--language-picker-list-min-width);
+    max-width: var(--language-picker-list-max-width);
+    padding: var(--language-picker-list-padding);
+    background-color: var(--language-picker-list-background-color);
+    border-radius: var(--language-picker-list-border-radius);
+    box-shadow: var(--language-picker-list-box-shadow);
+  }
+
+  ${SelectListItem} {
+    border-radius: var(--language-picker-list-item-border-radius);
+
+    & > * {
+      padding: var(--language-picker-list-item-vertical-padding)
+        var(--language-picker-list-item-horizontal-padding);
+    }
+  }
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    display: block;
+  }
+
+  :hover {
+    text-decoration: var(--navbar-item-hover-text-decoration);
+    background: var(--language-picker-hover-background-color);
+  }
+`;
+
+const LanguageItem = styled.div``;

package/src/i18n/index.ts

@@ -0,0 +1,2 @@
+export { LanguagePicker } from '@theme/i18n/LanguagePicker';
+export * from '@theme/i18n/styledVariables';

package/src/i18n/styledVariables.ts

@@ -0,0 +1,37 @@
+import { css } from "styled-components";
+
+export const languagePicker = css`
+  /**
+    * @tokens Language picker
+    * */
+
+  --language-picker-font-size: var(--select-font-size); // @presenter FontSize
+  --language-picker-font-weight: var(--select-font-weight); // @presenter FontWeight
+  --language-picker-line-height: var(--select-line-height); // @presenter LineHeight
+  --language-picker-text-color: var(--text-primary); // @presenter Color
+  --language-picker-min-height: var(--control-height-base); // @presenter Spacing
+  --language-picker-border-radius: calc(var(--spacing-unit) * 1.5); // @presenter BorderRadius
+  --language-picker-border-color: var(--border-primary); // @presenter Color
+  --language-picker-background-color: var(--bg-base); // @presenter Color
+  --language-picker-hover-background-color: var(--language-picker-background-color); // @presenter Color
+  --language-picker-hover-border-color: var(--text-primary); // @presenter Color
+
+  --language-picker-input-padding-horizontal: var(--select-input-padding-horizontal); // @presenter Spacing
+  --language-picker-input-padding-vertical: var(--select-input-padding-vertical); // @presenter Spacing
+  --language-picker-input-border-radius: var(--language-picker-border-radius); // @presenter BorderRadius
+
+  --language-picker-list-min-width: var(--select-list-min-width);
+  --language-picker-list-max-width: var(--select-list-max-width);
+  --language-picker-list-padding: var(--select-list-padding); // @presenter Spacing
+  --language-picker-list-border-radius: var(--language-picker-border-radius); // @presenter BorderRadius
+  --language-picker-list-background-color: var(--select-list-background-color); // @presenter Color
+  --language-picker-list-box-shadow: var(--select-list-box-shadow); // @presenter Shadow
+
+  --language-picker-list-item-horizontal-padding: var(--select-list-item-horizontal-padding); // @presenter Spacing
+  --language-picker-list-item-vertical-padding: var(--select-list-item-vertical-padding); // @presenter Spacing
+  --language-picker-list-item-border-radius: var(--select-list-item-border-radius); // @presenter BorderRadius
+  --language-picker-list-item-active-background-color: var(--select-list-item-active-background-color); // @presenter Color
+  --language-picker-list-item-hover-background-color: var(--select-list-item-hover-background-color); // @presenter Color
+
+  // @tokens End
+`