@redocly/theme 0.1.28 → 0.1.31

package/src/JsonViewer/JsonViewer.tsx

@@ -154,11 +154,6 @@ export const JsonViewer = styled(Json).attrs(() => ({
     color: gray;
   }
 
-  .collapsed > .collapser:after {
-    content: '+';
-    cursor: pointer;
-  }
-
   .ellipsis:after {
     content: ' … ';
   }
@@ -174,7 +169,11 @@ export const JsonViewer = styled(Json).attrs(() => ({
   }
 
   .collapsed {
-    display: inline-flex;
+    white-space: nowrap;
+
+    & > .collapser:after {
+      content: '+';
+    }
   }
 
   .hovered {
@@ -182,13 +181,19 @@ export const JsonViewer = styled(Json).attrs(() => ({
   }
 
   .collapser {
+    --size: 15px;
+    --margin-right: 3px;
+
+    display: inline-block;
     background-color: transparent;
     border: 0;
-    padding: 0;
+    padding: 1px;
     color: #fff;
-    width: 0;
-    height: 15px;
-    cursor: default;
+    width: var(--size);
+    height: var(--size);
+    margin-left: calc((var(--size) + var(--margin-right)) * -1);
+    margin-right: var(--margin-right);
+    cursor: pointer;
     user-select: none;
     -webkit-user-select: none;
     font-family: var(--code-font-family);
@@ -196,18 +201,15 @@ export const JsonViewer = styled(Json).attrs(() => ({
 
     &:after {
       content: '-';
-      cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
-      width: 15px;
       height: 100%;
-      padding: 2px 5px 2px 2px;
-      transform: translateX(-100%);
+      width: 100%;
+    }
 
-      &:focus {
-        outline: #fff dotted 1px;
-      }
+    &:focus {
+      outline: #fff dotted 1px;
     }
   }
 

package/src/PageNavigation/NextPageLink.tsx

@@ -14,7 +14,7 @@ export function NextPageLink(): JSX.Element {
   const { nextPage }: NextPageType = useSidebarSiblingsData() || {};
   const { navigation } = useThemeSettings(DEFAULT_THEME_NAME);
 
-  if (!nextPage || navigation?.hide) {
+  if (!nextPage || navigation?.hide || navigation?.nextPageLink?.hide) {
     return <div>&nbsp;</div>;
   }
 

package/src/PageNavigation/PageNavigation.tsx

@@ -3,8 +3,16 @@ import styled from 'styled-components';
 
 import { PreviousPageLink } from '@theme/PageNavigation/PreviousPageLink';
 import { NextPageLink } from '@theme/PageNavigation/NextPageLink';
+import { useThemeSettings } from '@portal/hooks';
+import { DEFAULT_THEME_NAME } from '@portal/constants';
+
+export function PageNavigation(): JSX.Element | null {
+  const { navigation } = useThemeSettings(DEFAULT_THEME_NAME);
+
+  if (navigation?.hide) {
+    return null;
+  }
 
-export function PageNavigation(): JSX.Element {
   return (
     <PageNavigationWrapper data-component-name="PageNavigation/PageNavigation">
       <PreviousPageLink />
@@ -16,5 +24,5 @@ export function PageNavigation(): JSX.Element {
 const PageNavigationWrapper = styled.div`
   display: flex;
   justify-content: space-between;
-  margin: 25px 0px;
+  margin: 25px 0;
 `;

package/src/PageNavigation/PreviousPageLink.tsx

@@ -14,11 +14,11 @@ export function PreviousPageLink(): JSX.Element {
   const { prevPage }: PreviousPageType = useSidebarSiblingsData() || {};
   const { navigation } = useThemeSettings(DEFAULT_THEME_NAME);
 
-  if (!prevPage || navigation?.hide) {
+  if (!prevPage || navigation?.hide || navigation?.previousPageLink?.hide) {
     return <div>&nbsp;</div>;
   }
 
-  const label = navigation?.nextPageLink?.label || `Back to ${prevPage.label}`;
+  const label = navigation?.previousPageLink?.label || `Back to ${prevPage.label}`;
 
   return (
     <StyledButton

package/src/Profile/Profile.tsx

@@ -0,0 +1,91 @@
+import React, { memo } from 'react';
+import styled, { css } from 'styled-components';
+
+import { getRandomColor } from '@theme/utils';
+
+export interface ProfileProps {
+  name: string;
+  imageUrl?: string;
+  color?: string;
+  onClick?: () => void;
+}
+
+const RANDOM_BG_COLOR: string = getRandomColor();
+
+function ProfileComponent({ name, imageUrl, onClick, color }: ProfileProps): JSX.Element {
+  if (imageUrl) {
+    return (
+      <ProfileWrapper onClick={onClick}>
+        <StyledUserName data-cy="user-name" color={color}>
+          {name}
+        </StyledUserName>
+        {imageUrl && (
+          <AvatarWrapper>
+            <img data-cy="user-avatar" src={imageUrl} alt="profile" />
+          </AvatarWrapper>
+        )}
+      </ProfileWrapper>
+    );
+  }
+
+  const avatarLetters = `${name.charAt(0).toUpperCase()}${
+    name.split(' ')[1]?.charAt(0).toUpperCase() || ''
+  }`;
+
+  return (
+    <ProfileWrapper onClick={onClick}>
+      <StyledUserName data-cy="user-name" color={color}>
+        {name}
+      </StyledUserName>
+      <AvatarWrapper background={RANDOM_BG_COLOR}>
+        <span>{avatarLetters}</span>
+      </AvatarWrapper>
+    </ProfileWrapper>
+  );
+}
+
+export const Profile = memo<ProfileProps>(ProfileComponent);
+
+const ProfileWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  width: auto;
+`;
+
+const StyledUserName = styled.span`
+  color: ${({ color }) => color || 'var(--color-content)'};
+`;
+
+const AvatarWrapper = styled.div<{ background?: string }>`
+  width: 40px;
+  height: 40px;
+  display: flex;
+  overflow: hidden;
+  position: relative;
+  font-size: 1.25rem;
+  align-items: center;
+  flex-shrink: 0;
+  line-height: 1;
+  user-select: none;
+  border-radius: 50%;
+  justify-content: center;
+  margin-left: 16px;
+
+  ${({ background }) => css`
+    background-color: ${background};
+    span {
+      color: ${background};
+      filter: invert(100%);
+    }
+  `}
+
+  & > img {
+    color: transparent;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    text-align: center;
+    text-indent: 10000px;
+  }
+`;

package/src/Profile/index.ts

@@ -0,0 +1,2 @@
+export { Profile } from './Profile';
+export type { ProfileProps } from './Profile';

package/src/TableOfContent/TableOfContent.tsx

@@ -18,9 +18,19 @@ export function TableOfContent(props: TableOfContentProps): JSX.Element | null {
 
   const sidebar = useRef<HTMLDivElement | null>(null);
   useFullHeight(sidebar);
-  const activeHeadingId = useActiveHeading(contentWrapper);
   const { toc } = useThemeSettings(DEFAULT_THEME_NAME);
 
+  const getDisplayedHeaderIds = () => {
+    if (!headings) {
+      return [];
+    }
+    return headings
+      .filter((header) => header && tocMaxDepth >= header.depth)
+      .map((header) => header?.id);
+  };
+
+  const activeHeadingId = useActiveHeading(contentWrapper, getDisplayedHeaderIds());
+
   if (toc?.hide) {
     return null;
   }

package/src/Tooltip/Tooltip.tsx

@@ -1,12 +1,13 @@
-import type { PropsWithChildren } from 'react';
-import React, { useCallback, useEffect, memo } from 'react';
+import type { PropsWithChildren, ReactNode } from 'react';
+import React, { useEffect, memo } from 'react';
 import styled, { css } from 'styled-components';
 
 import { useControl } from '@theme/hooks';
 
 export interface TooltipProps {
-  tip: string;
-  open?: boolean;
+  tip: string | ReactNode;
+  isOpen?: boolean;
+  withArrow?: boolean;
   placement?: 'top' | 'bottom' | 'left' | 'right';
   className?: string;
   width?: string;
@@ -15,46 +16,48 @@ export interface TooltipProps {
 
 export function TooltipComponent({
   children,
-  open,
+  isOpen,
   tip,
+  withArrow = true,
   placement = 'top',
   className = 'default',
   width,
-  dataTestId = tip,
+  dataTestId,
 }: PropsWithChildren<TooltipProps>): JSX.Element {
-  const { isOpened, handleOpen, handleClose } = useControl(open);
+  const { isOpened, handleOpen, handleClose } = useControl(isOpen);
 
-  const isControlled = open !== undefined;
+  const isControlled = isOpen !== undefined;
 
   useEffect(() => {
     if (isControlled) {
-      if (open) {
+      if (isOpen) {
         handleOpen();
       } else {
         handleClose();
       }
     }
-  }, [open, isControlled, handleOpen, handleClose]);
+  }, [isOpen, isControlled, handleOpen, handleClose]);
 
-  const handleEnter = useCallback(() => {
-    handleOpen();
-  }, [handleOpen]);
-
-  const handleLeave = useCallback(() => {
-    handleClose();
-  }, [handleClose]);
+  const controllers = !isControlled && {
+    onMouseEnter: handleOpen,
+    onMouseLeave: handleClose,
+    onClick: handleClose,
+  };
 
   return (
     <TooltipWrapper
-      onMouseEnter={isControlled ? undefined : handleEnter}
-      onMouseLeave={isControlled ? undefined : handleLeave}
-      onClick={isControlled ? undefined : handleLeave}
+      {...controllers}
       className={`tooltip-${className}`}
       data-component-name="Tooltip/Tooltip"
     >
       {children}
       {isOpened && (
-        <TooltipBody data-cy={dataTestId} placement={placement} width={width}>
+        <TooltipBody
+          data-cy={dataTestId || (typeof tip === 'string' ? tip : '')}
+          placement={placement}
+          width={width}
+          withArrow={withArrow}
+        >
           {tip}
         </TooltipBody>
       )}
@@ -65,69 +68,85 @@ export function TooltipComponent({
 export const Tooltip = memo<PropsWithChildren<TooltipProps>>(TooltipComponent);
 
 const PLACEMENTS = {
-  top: css`
+  top: css<Pick<TooltipProps, 'withArrow'>>`
     top: 0;
     left: 50%;
     transform: translate(-50%, -99%);
     margin-top: -10px;
 
-    &::after {
-      border-left: 5px solid transparent;
-      border-right: 5px solid transparent;
-      border-top-width: 6px;
-      border-top-style: solid;
-      bottom: 0;
-      left: 50%;
-      transform: translate(-50%, 99%);
-    }
+    ${({ withArrow }) =>
+      withArrow &&
+      css`
+        &::after {
+          border-left: 5px solid transparent;
+          border-right: 5px solid transparent;
+          border-top-width: 6px;
+          border-top-style: solid;
+          bottom: 0;
+          left: 50%;
+          transform: translate(-50%, 99%);
+        }
+      `}
   `,
-  bottom: css`
+  bottom: css<Pick<TooltipProps, 'withArrow'>>`
     bottom: 0;
     left: 50%;
     transform: translate(-50%, 99%);
     margin-bottom: -10px;
 
-    &::after {
-      border-left: 5px solid transparent;
-      border-right: 5px solid transparent;
-      border-bottom-width: 6px;
-      border-bottom-style: solid;
-      top: 0;
-      left: 50%;
-      transform: translate(-50%, -99%);
-    }
+    ${({ withArrow }) =>
+      withArrow &&
+      css`
+        &::after {
+          border-left: 5px solid transparent;
+          border-right: 5px solid transparent;
+          border-bottom-width: 6px;
+          border-bottom-style: solid;
+          top: 0;
+          left: 50%;
+          transform: translate(-50%, -99%);
+        }
+      `}
   `,
-  left: css`
+  left: css<Pick<TooltipProps, 'withArrow'>>`
     top: 50%;
     left: 0;
     transform: translate(-100%, -50%);
     margin-left: -10px;
 
-    &::after {
-      border-top: 5px solid transparent;
-      border-bottom: 5px solid transparent;
-      border-left-width: 6px;
-      border-left-style: solid;
-      top: 50%;
-      right: 0;
-      transform: translate(99%, -50%);
-    }
+    ${({ withArrow }) =>
+      withArrow &&
+      css`
+        &::after {
+          border-top: 5px solid transparent;
+          border-bottom: 5px solid transparent;
+          border-left-width: 6px;
+          border-left-style: solid;
+          top: 50%;
+          right: 0;
+          transform: translate(99%, -50%);
+        }
+      `}
   `,
-  right: css`
+  right: css<Pick<TooltipProps, 'withArrow'>>`
     top: 50%;
     right: 0;
     transform: translate(100%, -50%);
     margin-right: -10px;
 
-    &::after {
-      border-top: 5px solid transparent;
-      border-bottom: 5px solid transparent;
-      border-right-width: 6px;
-      border-right-style: solid;
-      top: 50%;
-      left: 0;
-      transform: translate(-99%, -50%);
-    }
+    ${({ withArrow }) =>
+      withArrow &&
+      css`
+        &::after {
+          border-top: 5px solid transparent;
+          border-bottom: 5px solid transparent;
+          border-right-width: 6px;
+          border-right-style: solid;
+          top: 50%;
+          left: 0;
+          transform: translate(-99%, -50%);
+        }
+      `}
   `,
 };
 
@@ -136,7 +155,9 @@ const TooltipWrapper = styled.div`
   display: inline-block;
 `;
 
-const TooltipBody = styled.span<Pick<Required<TooltipProps>, 'placement'> & { width?: string }>`
+const TooltipBody = styled.span<
+  Pick<Required<TooltipProps>, 'placement' | 'withArrow'> & { width?: string }
+>`
   display: inline-block;
 
   position: absolute;
@@ -168,5 +189,8 @@ const TooltipBody = styled.span<Pick<Required<TooltipProps>, 'placement'> & { wi
   box-shadow: rgb(0 0 0 / 25%) 0 2px 4px;
 
   width: ${({ width }) => width || '120px'};
-  ${({ placement }) => `${PLACEMENTS[placement]};`}
+  ${({ placement }) =>
+    css`
+      ${PLACEMENTS[placement]};
+    `}
 `;

package/src/hooks/useActiveHeading.ts

@@ -1,46 +1,110 @@
-import { useState, useMemo, useCallback, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
+import { useHistory } from 'react-router-dom';
 
 export type UseActiveHeadingReturnType = string | undefined;
 
-export function useActiveHeading(contentElement: Element | null): UseActiveHeadingReturnType {
+type HeadingEntry = {
+  [key: string]: IntersectionObserverEntry;
+};
+
+export function useActiveHeading(
+  contentElement: HTMLDivElement | null,
+  displayedHeaders: Array<string | undefined>,
+): UseActiveHeadingReturnType {
   const [heading, setHeading] = useState<string | undefined>(undefined);
+  const [headingElements, setHeadingElements] = useState<HTMLElement[]>([]);
+  const headingElementsRef = useRef<HeadingEntry>({});
 
-  const headings: NodeListOf<HTMLElement> | null = useMemo(
-    () => contentElement && contentElement.querySelectorAll<HTMLElement>('.heading-anchor'),
-    [contentElement],
-  );
+  const history = useHistory();
 
-  const handler = useCallback(
-    // throttle(
-    () => {
-      if (!headings) {
-        return;
-      }
+  const getVisibleHeadings = () => {
+    const visibleHeadings: IntersectionObserverEntry[] = [];
+
+    for (const key in headingElementsRef.current) {
+      const headingElement = headingElementsRef.current[key];
 
-      for (let i = 0; i < headings.length; i++) {
-        if (headings[i].offsetTop > window.scrollY) {
-          const newHeading = i === 0 ? undefined : headings[i - 1].getAttribute('id') || undefined;
-          setHeading(newHeading);
-          return;
-        }
+      if (headingElement.isIntersecting) {
+        visibleHeadings.push(headingElement);
       }
-    },
-    [headings],
-  );
+    }
+
+    return visibleHeadings;
+  };
+
+  const getIndexFromId = (id: string) => {
+    return headingElements.findIndex((item) => item.id === id);
+  };
+
+  const findHeaders = (allContent: HTMLDivElement) => {
+    const allHeaders = allContent.querySelectorAll<HTMLElement>('.heading-anchor');
+    return Array.from(allHeaders);
+  };
+
+  const intersectionCallback = (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);
+  };
 
   useEffect(() => {
-    if (typeof window === 'undefined' || !headings || !headings.length) {
-      return undefined;
+    if (!contentElement) {
+      return;
     }
+    setHeadingElements(findHeaders(contentElement));
 
-    window.addEventListener('scroll', handler, {
-      capture: false,
+    const unlisten = history.listen(() => {
+      setHeadingElements(findHeaders(contentElement));
     });
 
-    handler();
+    return () => unlisten();
+  }, [contentElement]);
+
+  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 () => window.removeEventListener('scroll', handler);
-  }, [handler, headings]);
+    return () => observer.disconnect();
+  }, [headingElements, displayedHeaders]);
 
   return heading;
 }

package/src/index.ts

@@ -14,3 +14,4 @@ export * from './utils';
 export * from './globalStyle';
 export * from './OperationBadge';
 export * from './TableOfContent';
+export * from './Profile';

package/src/mocks/hooks/index.ts

@@ -9,20 +9,17 @@ interface PageLink {
   type: 'link';
 }
 
-export function useThemeSettings(name: string): RawTheme['settings'] {
+export function useThemeSettings(_: string): RawTheme['settings'] {
   return {
-    name,
-    settings: {
-      toc: { header: 'header', hide: false },
-      navigation: {
-        nextPageLink: { label: 'next page' },
-        previousPageLink: { label: 'prev page' },
-      },
+    toc: { header: 'header', hide: false },
+    navigation: {
+      nextPageLink: { label: 'next page theme settings label' },
+      previousPageLink: { label: 'prev page theme settings label' },
     },
   };
 }
 
-export function useSidebarSiblingsData(): { nextPage: PageLink; prevPage: PageLink } {
+export function useSidebarSiblingsData(): { nextPage: PageLink | null; prevPage: PageLink | null } {
   return {
     nextPage: {
       type: 'link',

package/src/utils/color.ts

@@ -0,0 +1,9 @@
+export const getRandomNumber = (limit: number): number => Math.floor(Math.random() * limit);
+
+export function getRandomColor(): string {
+  const h = getRandomNumber(360);
+  const s = getRandomNumber(100);
+  const l = getRandomNumber(100);
+
+  return `hsl(${h}deg, ${s}%, ${l}%)`;
+}

package/src/utils/index.ts

@@ -6,3 +6,4 @@ export * from './media-css';
 export * from './theme-helpers';
 export * from './class-names';
 export * from './args-typecheck';
+export * from './color';

package/src/utils/theme-helpers.ts

@@ -7,7 +7,7 @@ enum Token {
   Doctype = 'doctype',
   Cdata = 'cdata',
   Punctuation = 'punctuation',
-  property = 'property',
+  Property = 'property',
   Tag = 'tag',
   Number = 'number',
   Constant = 'constant',
@@ -23,6 +23,8 @@ enum Token {
   Url = 'url',
   Variable = 'variable',
   Atrule = 'atrule',
+  AttrValue = 'attr-value',
+  AttrName = 'attr-name',
   Keyword = 'keyword',
   Regex = 'regex',
   Important = 'important',

package/utils/color.d.ts

@@ -0,0 +1,2 @@
+export declare const getRandomNumber: (limit: number) => number;
+export declare function getRandomColor(): string;