@redocly/theme 0.1.27 → 0.1.30

package/src/Navbar/NavbarMenu.tsx

@@ -3,9 +3,10 @@ import styled from 'styled-components';
 
 import { NavbarItem } from '@theme/Navbar/NavbarItem';
 import type { ResolvedConfigLinks, ResolvedNavItem } from '@theme/types/portal';
+import { isPrimitive, isEmptyArray } from '@theme/utils';
 
 export function NavbarMenu({ menuItems }: { menuItems: ResolvedConfigLinks }): JSX.Element | null {
-  if (!menuItems?.length) {
+  if (isPrimitive(menuItems) || isEmptyArray(menuItems)) {
     return null;
   }
 
@@ -22,11 +23,15 @@ export function NavbarMenu({ menuItems }: { menuItems: ResolvedConfigLinks }): J
 
 const NavItemsContainer = styled.ul`
   list-style: none;
-  margin: 0;
+  margin: 0 7px;
   padding: 0;
-  display: block;
+  display: none;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: flex-end;
+  flex: 1;
 
   ${({ theme }) => theme.mediaQueries.medium} {
-    display: block;
+    display: flex;
   }
 `;

package/src/PageNavigation/NextPageLink.tsx

@@ -12,13 +12,13 @@ interface NextPageType {
 
 export function NextPageLink(): JSX.Element {
   const { nextPage }: NextPageType = useSidebarSiblingsData() || {};
-  const { themeSettings } = useThemeSettings(DEFAULT_THEME_NAME);
+  const { navigation } = useThemeSettings(DEFAULT_THEME_NAME);
 
-  if (!nextPage || themeSettings?.navigation?.hide) {
+  if (!nextPage || navigation?.hide) {
     return <div>&nbsp;</div>;
   }
 
-  const label = themeSettings?.navigation?.nextPageLink?.label || `Next to ${nextPage.label}`;
+  const label = navigation?.nextPageLink?.label || `Next to ${nextPage.label}`;
 
   return (
     <StyledButton

package/src/PageNavigation/PreviousPageLink.tsx

@@ -12,13 +12,13 @@ interface PreviousPageType {
 
 export function PreviousPageLink(): JSX.Element {
   const { prevPage }: PreviousPageType = useSidebarSiblingsData() || {};
-  const { themeSettings } = useThemeSettings(DEFAULT_THEME_NAME);
+  const { navigation } = useThemeSettings(DEFAULT_THEME_NAME);
 
-  if (!prevPage || themeSettings?.navigation?.hide) {
+  if (!prevPage || navigation?.hide) {
     return <div>&nbsp;</div>;
   }
 
-  const label = themeSettings?.navigation?.nextPageLink?.label || `Back to ${prevPage.label}`;
+  const label = navigation?.nextPageLink?.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/SourceCode/SourceCode.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { highlight } from '@theme/utils';
+import { highlight, addLineNumbers } from '@theme/utils';
 import {
   SampleControls,
   SampleControlsWrap,
@@ -8,7 +8,12 @@ import {
 } from '@theme/SamplesPanelControls';
 import { CopyButtonWrapper } from '@theme/CopyButton';
 
-export interface SourceCodeProps {
+interface CommonCodeProps {
+  withLineNumbers?: boolean;
+  startLineNumber?: number;
+}
+
+export interface SourceCodeProps extends CommonCodeProps {
   lang: string;
   source?: string;
   externalSource?: ExternalSource;
@@ -16,6 +21,10 @@ export interface SourceCodeProps {
   dataTestId?: string;
 }
 
+interface CodeProps
+  extends Required<Pick<SourceCodeProps, 'lang' | 'source' | 'dataTestId'>>,
+    CommonCodeProps {}
+
 export interface Sample {
   lang: string;
   label?: string;
@@ -37,10 +46,18 @@ export function Code({
   source,
   lang,
   dataTestId,
-}: Required<Omit<SourceCodeProps, 'externalSource' | 'withCopyButton'>>): JSX.Element {
+  withLineNumbers,
+  startLineNumber,
+}: CodeProps): JSX.Element {
+  const highlightedCode = highlight(source, lang);
+
   return (
     <PreformattedCodeBlock
-      dangerouslySetInnerHTML={{ __html: highlight(source, lang) }}
+      dangerouslySetInnerHTML={{
+        __html: withLineNumbers
+          ? addLineNumbers(highlightedCode, startLineNumber)
+          : highlightedCode,
+      }}
       data-cy={dataTestId}
     />
   );
@@ -52,6 +69,8 @@ export function SourceCode({
   externalSource,
   withCopyButton,
   dataTestId = 'source-code',
+  withLineNumbers,
+  startLineNumber,
 }: SourceCodeProps): JSX.Element {
   const _source = source || externalSource?.sample?.get?.(externalSource) || '';
   if (withCopyButton) {
@@ -60,7 +79,13 @@ export function SourceCode({
         {({ renderCopyButton }) => (
           <SampleControlsWrap>
             <SampleControls data-cy="copy-button">{renderCopyButton()}</SampleControls>
-            <Code lang={lang} source={_source} dataTestId={dataTestId} />
+            <Code
+              lang={lang}
+              source={_source}
+              withLineNumbers={withLineNumbers}
+              startLineNumber={startLineNumber}
+              dataTestId={dataTestId}
+            />
           </SampleControlsWrap>
         )}
       </CopyButtonWrapper>
@@ -72,6 +97,8 @@ export function SourceCode({
       dataTestId={dataTestId}
       lang={lang}
       source={_source}
+      withLineNumbers={withLineNumbers}
+      startLineNumber={startLineNumber}
       data-component-name="SourceCode/SourceCode"
     />
   );

package/src/TableOfContent/TableOfContent.tsx

@@ -18,10 +18,20 @@ export function TableOfContent(props: TableOfContentProps): JSX.Element | null {
 
   const sidebar = useRef<HTMLDivElement | null>(null);
   useFullHeight(sidebar);
-  const activeHeadingId = useActiveHeading(contentWrapper);
-  const { themeSettings } = useThemeSettings(DEFAULT_THEME_NAME);
+  const { toc } = useThemeSettings(DEFAULT_THEME_NAME);
 
-  if (themeSettings?.toc?.hide) {
+  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;
   }
   if (headings && headings.length === 1 && (!headings[0] || headings[0].depth === 1)) {
@@ -36,7 +46,7 @@ export function TableOfContent(props: TableOfContentProps): JSX.Element | null {
       {headings && (
         <TableOfContentMenu data-component-name="TableOfContent/TableOfContent">
           <TableOfContentItems ref={sidebar}>
-            <TocHeader>{themeSettings?.toc?.header?.label || 'On this page'}</TocHeader>
+            <TocHeader>{toc?.header?.label || 'On this page'}</TocHeader>
             {headings.map((heading: MdHeading | null, idx: number) => {
               // TODO: not sure about !heading
               if (!heading) {

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/globalStyle.ts

@@ -299,6 +299,7 @@ const buttons = css`
     * @tokens Button borders
     */
   --button-border-radius: var(--global-border-radius); // @presenter BorderRadius
+  --button-margin: 5px; // @presenter Margin
   --button-box-shadow: none; // @presenter Shadow
   --button-active-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1); // @presenter Shadow
 
@@ -751,6 +752,7 @@ const navbar = css`
   --navbar-item-font-weight: var(--font-weight-bold); // @presenter FontWeight
   --navbar-item-active-background-color: #1b75fa; // @presenter Color
   --navbar-item-active-text-color: var(--navbar-text-color); // @presenter Color
+  --navbar-item-separator-line-color: var(--sidebar-separator-line-color); // @presenter Color
   --navbar-item-active-text-decoration: none;
 
   // @tokens End

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/types/portal/src/client/app/Sidebar/types.d.ts

@@ -1,3 +1,4 @@
+import { PERMISSION_PROP_NAME } from '../../../shared/constants';
 import { MenuStyle } from '../../../shared/types';
 export interface SidebarNavItem {
     label?: string;
@@ -18,7 +19,7 @@ export interface SidebarNavItem {
     target?: string;
     external?: boolean;
     items?: SidebarNavItem[];
-    permission?: string;
+    [PERMISSION_PROP_NAME]?: string;
     menuStyle?: MenuStyle;
     separatorLine?: boolean;
     version?: string;