@redocly/theme 0.64.0-next.1 → 0.64.0-next.3

package/src/components/Switch/variables.ts

@@ -2,7 +2,7 @@ import { css } from 'styled-components';
 
 export const switcher = css`
     --switch-bg-color: var(--color-warm-grey-4); // @presenter Color
-    --switch-bg-color-selected: var(--color-warm-grey-9); // @presenter Color
+    --switch-bg-color-selected: var(--color-primary-base, var(--switch-bg-color-selected-legacy)); // @presenter Color
     --switch-bg-color-hover: var(--color-warm-grey-5); // @presenter Color
     --switch-bg-color-pressed: var(--color-warm-grey-6); // @presenter Color
     --switch-bg-color-disabled: var(--color-warm-grey-3); // @presenter Color

package/src/components/TableOfContent/TableOfContent.tsx

@@ -128,6 +128,7 @@ const TableOfContentMenuItem = styled.a<{ depth: number }>`
   &.active {
     color: var(--toc-item-text-color-active);
     border-left: solid 2px var(--toc-item-border-color-active);
+    font-weight: var(--toc-item-font-weight-active);
   }
 
   :empty {

package/src/components/TableOfContent/variables.ts

@@ -24,12 +24,13 @@ export const toc = css`
 
   --toc-item-font-weight: var(--font-weight-regular); // @presenter FontWeight
   --toc-item-text-color: var(--text-color-description); // @presenter Color
-  --toc-item-text-color-active: var(--text-color-primary); // @presenter Color
+  --toc-item-text-color-active: var(--color-primary-text, var(--toc-item-text-color-active-legacy)); // @presenter Color
   --toc-item-bg-color: transparent; // @presenter Color
   --toc-item-nested-offset: calc(var(--toc-spacing-unit) * 2); // @presenter Spacing
   --toc-item-padding-vertical: calc(var(--toc-spacing-unit) / 2); // @presenter Spacing
   --toc-item-padding-horizontal: calc(var(--toc-spacing-unit) * 2); // @presenter Spacing
-  --toc-item-border-color-active: var(--border-color-invers);
+  --toc-item-border-color-active: var(--color-primary-base, var(--toc-item-border-color-active-legacy));
+  --toc-item-font-weight-active: var(--font-weight-medium); // @presenter FontWeight
 
   /**
     * @tokens TOC header

package/src/components/Toast/Toast.tsx

@@ -0,0 +1,289 @@
+import React, { memo } from 'react';
+import styled, { css, keyframes } from 'styled-components';
+
+import type { ReactElement } from 'react';
+import type { ToastItem, ToastType } from '@redocly/theme/core/types';
+
+import { CheckmarkFilledIcon } from '@redocly/theme/icons/CheckmarkFilledIcon/CheckmarkFilledIcon';
+import { CircleDashIcon } from '@redocly/theme/icons/CircleDashIcon/CircleDashIcon';
+import { CloseIcon } from '@redocly/theme/icons/CloseIcon/CloseIcon';
+import { ErrorFilledIcon } from '@redocly/theme/icons/ErrorFilledIcon/ErrorFilledIcon';
+import { InformationFilledIcon } from '@redocly/theme/icons/InformationFilledIcon/InformationFilledIcon';
+import { WarningFilledIcon } from '@redocly/theme/icons/WarningFilledIcon/WarningFilledIcon';
+import { useToastLogic } from '@redocly/theme/core/hooks';
+import { Button } from '@redocly/theme/components/Button/Button';
+import { TOAST_SLIDE_DURATION_MS } from '@redocly/theme/core/constants/toast';
+
+function renderToastIcon(type: ToastType): ReactElement {
+  switch (type) {
+    case 'success':
+      return <CheckmarkFilledIcon size="--toast-icon-size" color="--toast-icon-color-success" />;
+    case 'warning':
+      return <WarningFilledIcon size="--toast-icon-size" color="--toast-icon-color-warning" />;
+    case 'error':
+      return <ErrorFilledIcon size="--toast-icon-size" color="--toast-icon-color-error" />;
+    case 'loading':
+      return <CircleDashIcon size="--toast-icon-size" color="--toast-icon-color-loading" />;
+    case 'info':
+    default:
+      return <InformationFilledIcon size="--toast-icon-size" color="--toast-icon-color-info" />;
+  }
+}
+
+function renderDismissButton(onClick: () => void): ReactElement {
+  return (
+    <CloseButton
+      aria-label="Dismiss notification"
+      title="Dismiss notification"
+      icon={
+        <CloseIcon size="--toast-close-button-icon-size" color="--toast-close-button-icon-color" />
+      }
+      onClick={onClick}
+    />
+  );
+}
+
+export interface ToastComponentProps {
+  toast: ToastItem;
+  onDismiss: (id: string) => void;
+  stackIndex: number;
+  stackZIndex?: number;
+  className?: string;
+}
+
+function ToastComponent({
+  toast,
+  onDismiss,
+  stackIndex,
+  stackZIndex = 1,
+  className,
+}: ToastComponentProps): ReactElement {
+  const {
+    wrapperRef,
+    hasDetails,
+    dismissToast,
+    handleMouseEnter,
+    handleMouseLeave,
+    ariaRole,
+    ariaLive,
+  } = useToastLogic({
+    toast,
+    onDismiss,
+    stackIndex,
+  });
+
+  const icon = renderToastIcon(toast.type);
+  const content = !hasDetails ? (
+    <SimpleToastSurface $isExiting={toast.isExiting} aria-live={ariaLive} role={ariaRole}>
+      <ContentWrapper>
+        <IconWrapper>{icon}</IconWrapper>
+        <SimpleContent>
+          <SimpleText>{toast.title}</SimpleText>
+        </SimpleContent>
+      </ContentWrapper>
+      {renderDismissButton(dismissToast)}
+    </SimpleToastSurface>
+  ) : (
+    <DetailedToastSurface $isExiting={toast.isExiting} aria-live={ariaLive} role={ariaRole}>
+      <ContentWrapper>
+        <IconWrapper>{icon}</IconWrapper>
+        <Body>
+          <TitleRow>
+            <TitleText>{toast.title}</TitleText>
+            {renderDismissButton(dismissToast)}
+          </TitleRow>
+          {toast.description ? (
+            <DescriptionRow>
+              <DescriptionText>{toast.description}</DescriptionText>
+            </DescriptionRow>
+          ) : null}
+        </Body>
+      </ContentWrapper>
+    </DetailedToastSurface>
+  );
+
+  return (
+    <ToastWrapper
+      ref={wrapperRef}
+      $stackZIndex={stackZIndex}
+      className={className}
+      data-component-name="Toast/Toast"
+      data-testid={`toast-${toast.type}`}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      {content}
+    </ToastWrapper>
+  );
+}
+
+export const Toast = memo(ToastComponent);
+
+const slideIn = keyframes`
+  from {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+`;
+
+const slideOut = keyframes`
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+
+  to {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+`;
+
+export const spin = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+`;
+
+const ToastWrapper = styled.div<{ $stackZIndex: number }>`
+  position: relative;
+  z-index: ${({ $stackZIndex }) => $stackZIndex};
+  width: 100%;
+  pointer-events: auto;
+  will-change: transform;
+`;
+
+const ToastSurface = styled.div<{ $isExiting: boolean }>`
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+  min-width: var(--toast-min-width);
+  max-width: var(--toast-max-width);
+  background-color: var(--toast-bg-color);
+  border: var(--toast-border);
+  border-radius: var(--toast-border-radius);
+  box-shadow: var(--toast-box-shadow);
+  color: var(--toast-text-color);
+  font-family: var(--toast-font-family);
+  animation: ${({ $isExiting }) =>
+    $isExiting
+      ? css`
+          ${slideOut} ${TOAST_SLIDE_DURATION_MS}ms ease-in forwards
+        `
+      : css`
+          ${slideIn} ${TOAST_SLIDE_DURATION_MS}ms ease-out
+        `};
+
+  @media (max-width: 480px) {
+    min-width: 0;
+    max-width: none;
+  }
+`;
+
+const SimpleToastSurface = styled(ToastSurface)`
+  gap: var(--toast-simple-gap);
+  padding: var(--toast-simple-padding);
+`;
+
+const DetailedToastSurface = styled(ToastSurface)`
+  padding: var(--toast-detailed-padding);
+`;
+
+const ContentWrapper = styled.div`
+  display: flex;
+  flex: 1 1 auto;
+  gap: var(--toast-content-gap);
+  min-width: 0;
+`;
+
+const IconWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--toast-icon-size);
+  min-width: var(--toast-icon-size);
+  height: var(--toast-icon-line-height);
+
+  ${CircleDashIcon} {
+    animation: ${spin} var(--toast-loading-animation-duration) linear infinite;
+  }
+`;
+
+const flexItemStyles = css`
+  flex: 1 1 auto;
+  min-width: 0;
+`;
+
+const SimpleContent = styled.div`
+  ${flexItemStyles}
+`;
+
+const Body = styled.div`
+  display: flex;
+  ${flexItemStyles}
+  flex-direction: column;
+`;
+
+const TitleRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: var(--toast-title-gap);
+  min-width: 0;
+`;
+
+const DescriptionRow = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--toast-description-gap);
+  min-width: 0;
+`;
+
+const textStyles = css`
+  margin: 0;
+  font-size: var(--toast-text-font-size);
+  line-height: var(--toast-text-line-height);
+  color: var(--toast-text-color);
+  overflow-wrap: anywhere;
+`;
+
+const TitleText = styled.p`
+  ${textStyles}
+  ${flexItemStyles}
+  font-weight: var(--toast-title-font-weight);
+`;
+
+const SimpleText = styled.p`
+  ${textStyles}
+  font-weight: var(--toast-body-font-weight);
+`;
+
+const DescriptionText = styled.p`
+  ${textStyles}
+  ${flexItemStyles}
+  font-weight: var(--toast-body-font-weight);
+`;
+
+const CloseButton = styled(Button).attrs({
+  variant: 'ghost',
+  size: 'small',
+})`
+  flex: 0 0 auto;
+  min-height: unset;
+  margin: 0;
+  padding: var(--toast-close-button-padding);
+  color: var(--toast-close-button-icon-color);
+
+  &:hover,
+  &:focus-visible {
+    border: none;
+  }
+`;

package/src/components/Toast/variables.ts

@@ -0,0 +1,61 @@
+import { css } from 'styled-components';
+
+/* eslint-disable theme/no-raw-colors-in-styles */
+export const toast = css`
+  /**
+    * @tokens Toast
+    * @presenter BoxShadow
+    */
+
+  --toast-box-shadow: 2px 2px 12px 0 rgba(0, 0, 0, 0.04), 2px 2px 24px 8px rgba(0, 0, 0, 0.04);
+
+  /**
+    * @tokens Toast surface
+    */
+  --toast-min-width: 240px;
+  --toast-max-width: 360px;
+  --toast-bg-color: var(--layer-color); // @presenter Color
+  --toast-border: var(--border-width) var(--border-style) var(--border-color-secondary); // @presenter Border
+  --toast-border-radius: var(--border-radius-md); // @presenter BorderRadius
+  --toast-font-family: var(--font-family-base); // @presenter FontFamily
+
+  /**
+    * @tokens Toast spacing
+    */
+  --toast-simple-gap: var(--spacing-unit);
+  --toast-simple-padding: var(--spacing-xs) var(--spacing-sm);
+  --toast-detailed-padding: var(--spacing-sm);
+  --toast-content-gap: var(--spacing-xs);
+  --toast-title-gap: var(--spacing-xs);
+  --toast-description-gap: var(--spacing-xs);
+
+  /**
+    * @tokens Toast icon
+    */
+  --toast-icon-size: 14px;
+  --toast-icon-line-height: var(--line-height-base); // @presenter LineHeight
+  --toast-icon-color-info: var(--color-info-base); // @presenter Color
+  --toast-icon-color-success: var(--color-success-base); // @presenter Color
+  --toast-icon-color-warning: var(--color-warning-base); // @presenter Color
+  --toast-icon-color-error: var(--color-error-base); // @presenter Color
+  --toast-icon-color-loading: var(--loading-spinner-color); // @presenter Color
+  --toast-loading-animation-duration: 3s;
+
+  /**
+    * @tokens Toast typography
+    */
+  --toast-text-font-size: var(--font-size-base); // @presenter FontSize
+  --toast-text-line-height: var(--line-height-base); // @presenter LineHeight
+  --toast-text-color: var(--text-color-primary); // @presenter Color
+  --toast-title-font-weight: var(--font-weight-semibold); // @presenter FontWeight
+  --toast-body-font-weight: var(--font-weight-regular); // @presenter FontWeight
+
+  /**
+    * @tokens Toast close button
+    */
+  --toast-close-button-padding: 3px;
+  --toast-close-button-icon-size: 14px;
+  --toast-close-button-icon-color: var(--icon-color-secondary); // @presenter Color
+
+  // @tokens End
+`;

package/src/components/Tooltip/JsTooltip.tsx

@@ -289,7 +289,7 @@ const TooltipBody = styled.span<
     var(--tooltip-border-color, transparent);
   box-shadow: var(--bg-raised-shadow);
 
-  width: ${({ width }) => width || 'auto'};
+  width: ${({ width }) => width || 'max-content'};
   ${({ placement }) => css`
     ${PLACEMENTS[placement]};
   `}

package/src/core/constants/catalog.ts

@@ -1,6 +1,6 @@
 import type { EntityRelationType } from '../types/catalog';
 
-export const CATALOG_TAG_MAX_LENGTH = 15;
+export const CATALOG_TAG_MAX_LENGTH = 12;
 
 export const PREDEFINED_ENTITY_TYPES = [
   'service',

package/src/core/constants/toast.ts

@@ -0,0 +1 @@
+export const TOAST_SLIDE_DURATION_MS = 300;

package/src/core/contexts/Toast/ToastContext.tsx

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+import type { ToastContextValue } from '@redocly/theme/core/types';
+
+export const ToastContext = createContext<ToastContextValue | null>(null);

package/src/core/contexts/Toast/ToastProvider.tsx

@@ -0,0 +1,206 @@
+import styled from 'styled-components';
+import React, { useCallback, useEffect, useMemo, useReducer, useRef } from 'react';
+
+import type { ReactElement } from 'react';
+import type {
+  ToastContextValue,
+  ToastItem,
+  ToastOptions,
+  ToastProviderProps,
+  ToastType,
+} from '../../../core/types/toast';
+
+import { Portal } from '@redocly/theme/components/Portal/Portal';
+import { Toast } from '@redocly/theme/components/Toast/Toast';
+
+import { ToastContext } from '../../../core/contexts/Toast/ToastContext';
+import { TOAST_SLIDE_DURATION_MS } from '../../../core/constants/toast';
+
+type ToastState = ToastItem[];
+
+type ToastReducerAction =
+  | {
+      type: 'add';
+      payload: ToastItem;
+    }
+  | {
+      type: 'startExit';
+      payload: {
+        id: string;
+      };
+    }
+  | {
+      type: 'remove';
+      payload: {
+        id: string;
+      };
+    }
+  | {
+      type: 'update';
+      payload: {
+        id: string;
+        updates: Partial<ToastOptions>;
+      };
+    };
+
+function toastReducer(state: ToastState, action: ToastReducerAction): ToastState {
+  switch (action.type) {
+    case 'add':
+      return [action.payload, ...state];
+    case 'startExit':
+      return state.map((toast) =>
+        toast.id === action.payload.id ? { ...toast, isExiting: true } : toast,
+      );
+    case 'remove':
+      return state.filter((toast) => toast.id !== action.payload.id);
+    case 'update':
+      return state.map((toast) =>
+        toast.id === action.payload.id
+          ? {
+              ...toast,
+              ...action.payload.updates,
+              type: action.payload.updates.type ?? toast.type,
+            }
+          : toast,
+      );
+    default:
+      return state;
+  }
+}
+
+function getToastType(type?: ToastType): ToastType {
+  return type ?? 'info';
+}
+
+function createToastId(): string {
+  if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+    return crypto.randomUUID();
+  }
+
+  return `toast-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`;
+}
+
+export function ToastProvider({ children, mountId }: ToastProviderProps): ReactElement {
+  const [toasts, dispatch] = useReducer(toastReducer, []);
+  const toastsRef = useRef<ToastItem[]>([]);
+  const removeTimeoutsRef = useRef<Map<string, ReturnType<typeof setTimeout>>>(new Map());
+
+  useEffect(() => {
+    toastsRef.current = toasts;
+  }, [toasts]);
+
+  useEffect(() => {
+    const timeoutsMap = removeTimeoutsRef.current;
+
+    return () => {
+      timeoutsMap.forEach((timeoutId) => {
+        clearTimeout(timeoutId);
+      });
+
+      timeoutsMap.clear();
+    };
+  }, []);
+
+  const dismissToast = useCallback((id: string): void => {
+    const currentToast = toastsRef.current.find((toast) => toast.id === id);
+
+    if (!currentToast || currentToast.isExiting) {
+      return;
+    }
+
+    currentToast.onClose?.();
+    dispatch({ type: 'startExit', payload: { id } });
+
+    const existingTimeout = removeTimeoutsRef.current.get(id);
+
+    if (existingTimeout) {
+      clearTimeout(existingTimeout);
+    }
+
+    const timeoutId = setTimeout(() => {
+      dispatch({ type: 'remove', payload: { id } });
+      removeTimeoutsRef.current.delete(id);
+    }, TOAST_SLIDE_DURATION_MS);
+
+    removeTimeoutsRef.current.set(id, timeoutId);
+  }, []);
+
+  const showToast = useCallback((options: ToastOptions): string => {
+    const id = createToastId();
+
+    dispatch({
+      type: 'add',
+      payload: {
+        ...options,
+        id,
+        type: getToastType(options.type),
+        isExiting: false,
+      },
+    });
+
+    return id;
+  }, []);
+
+  const updateToast = useCallback((id: string, updates: Partial<ToastOptions>): void => {
+    dispatch({
+      type: 'update',
+      payload: {
+        id,
+        updates,
+      },
+    });
+  }, []);
+
+  const contextValue = useMemo<ToastContextValue>(
+    () => ({
+      showToast,
+      dismissToast,
+      updateToast,
+    }),
+    [dismissToast, showToast, updateToast],
+  );
+
+  return (
+    <ToastContext.Provider value={contextValue}>
+      {children}
+      {toasts.length > 0 ? (
+        <Portal mountId={mountId}>
+          <ToastViewport aria-label="Notifications">
+            {toasts.map((toast, index) => (
+              <Toast
+                key={toast.id}
+                stackIndex={index}
+                stackZIndex={toasts.length - index}
+                toast={toast}
+                onDismiss={dismissToast}
+              />
+            ))}
+          </ToastViewport>
+        </Portal>
+      ) : null}
+    </ToastContext.Provider>
+  );
+}
+
+const ToastViewport = styled.div`
+  position: fixed;
+  right: var(--spacing-md);
+  bottom: var(--spacing-md);
+  z-index: 1100;
+  display: flex;
+  flex-direction: column-reverse;
+  gap: var(--spacing-sm);
+  width: 320px;
+  min-width: 240px;
+  max-width: 360px;
+  pointer-events: none;
+
+  @media (max-width: 480px) {
+    left: 50%;
+    right: auto;
+    transform: translateX(-50%);
+    width: calc(100vw - var(--spacing-md) * 2);
+    min-width: 0;
+    max-width: none;
+  }
+`;

package/src/core/contexts/index.ts

@@ -3,3 +3,5 @@ export * from './CodeWalkthrough/CodeWalkthroughControlsContext';
 export * from './CodeWalkthrough/CodeWalkthroughStepsContext';
 export * from './CodeSnippetContext';
 export * from './SearchContext';
+export * from './Toast/ToastContext';
+export * from './Toast/ToastProvider';

package/src/core/hooks/catalog/use-catalog-entity-link.ts

@@ -0,0 +1,46 @@
+import { useMemo } from 'react';
+
+import type { EntitiesCatalogConfig } from '@redocly/config';
+
+export type EntityWithTypeAndKey = { type?: string; key?: string };
+
+function isEntityExcluded(
+  excludes: Array<{ key: string }> | undefined,
+  entityKey: string,
+): boolean {
+  return excludes?.some((ex) => ex.key === entityKey) ?? false;
+}
+
+function doesCatalogIncludeEntityType(
+  config: { includes?: Array<{ type: string }> },
+  entityType: string,
+): boolean {
+  const hasNoIncludes = !config.includes || config.includes.length === 0;
+  if (hasNoIncludes) return true;
+  return config.includes?.some((inc) => inc.type === entityType) ?? false;
+}
+
+export function useCatalogEntityLink(entitiesCatalogConfig: EntitiesCatalogConfig | undefined) {
+  const catalogEntries = useMemo(() => {
+    const catalogs = entitiesCatalogConfig?.catalogs;
+    if (!catalogs) return [];
+    return Object.entries(catalogs)
+      .filter((entry): entry is [string, NonNullable<(typeof entry)[1]>] => entry[1] != null)
+      .sort(([keyA], [keyB]) => (keyA === 'all' ? 1 : 0) - (keyB === 'all' ? 1 : 0));
+  }, [entitiesCatalogConfig]);
+
+  const getEntityLink = (entity: EntityWithTypeAndKey): string | undefined => {
+    if (!entity?.key) return undefined;
+    const entityType = entity.type ?? '';
+
+    for (const [catalogKey, config] of catalogEntries) {
+      if (isEntityExcluded(config.excludes, entity.key)) continue;
+      if (!doesCatalogIncludeEntityType(config, entityType)) continue;
+      const slug = config.slug ?? catalogKey;
+      return `catalogs/${slug}/entities/${entity.key}`;
+    }
+    return undefined;
+  };
+
+  return { getEntityLink };
+}