@redocly/theme 0.55.0-rc.1 → 0.55.0

package/src/components/Select/SelectInput.tsx

@@ -9,6 +9,7 @@ import { Button } from '@redocly/theme/components/Button/Button';
 
 type SelectInputProps<T> = {
   id?: string;
+  listboxId?: string;
   selectedOptions: SelectOption<T>[];
   searchValue: any;
   stickyValue: any;
@@ -30,6 +31,7 @@ type SelectInputProps<T> = {
 export function SelectInput<T>(props: SelectInputProps<T>): React.ReactNode {
   const {
     id,
+    listboxId,
     onlyIcon,
     icon,
     customIcon,
@@ -119,6 +121,13 @@ export function SelectInput<T>(props: SelectInputProps<T>): React.ReactNode {
         }
       }}
       width={multiple ? (!searchValue && selectedOptions.length ? '10px' : 'auto') : '100%'}
+      tabIndex={0}
+      onFocus={(e) => {
+        e.stopPropagation();
+      }}
+      onMouseDown={(e) => {
+        e.preventDefault();
+      }}
     />
   );
 
@@ -135,7 +144,17 @@ export function SelectInput<T>(props: SelectInputProps<T>): React.ReactNode {
   );
 
   return (
-    <SelectInputWrapper {...props} id={id} onFocus={onFocusHandler} onClick={onClickHandler}>
+    <SelectInputWrapper
+      {...props}
+      id={id}
+      onFocus={onFocusHandler}
+      onClick={onClickHandler}
+      role="button"
+      aria-haspopup="listbox"
+      aria-controls={listboxId}
+      aria-owns={listboxId}
+      aria-label="Select option"
+    >
       {!onlyIcon && (
         <>
           <SelectInputValue>

package/src/components/Select/variables.ts

@@ -10,7 +10,7 @@ export const select = css`
   --select-text-color: var(--text-color-secondary); // @presenter Color
   --select-border-radius: var(--border-radius); // @presenter BorderRadius
   --select-border: var(--border-width) var(--border-style) var(--border-color-primary); // @presenter Border
-
+  
   --select-input-padding-vertical: 6px; // @presenter Spacing
   --select-input-padding-horizontal: 6px; // @presenter Spacing
   --select-input-padding: var(--select-input-padding-vertical) var(--select-input-padding-horizontal);
@@ -38,7 +38,7 @@ export const select = css`
   --select-list-item-border-radius: var(--border-radius); // @presenter BorderRadius
   --select-list-item-bg-color-active: transparent; // @presenter Color
   --select-list-item-bg-color-hover: var(--menu-item-bg-color-hover); // @presenter Color
-  --select-list-item-font-weight-active: var(--font-weight-medium); // @presenter Color
+  --select-list-item-font-weight-active: var(--font-weight-medium); // @presenter Color  
 
   --select-placeholder-color: var(--color-warm-grey-6); // @presenter Color
   // @tokens End

package/src/components/Sidebar/Sidebar.tsx

@@ -121,7 +121,7 @@ const SidebarContent = styled.aside<{ opened?: boolean; collapsed?: boolean }>`
   }
 `;
 
-const SidebarHeader = styled.div<{ collapsed?: boolean }>`
+export const SidebarHeader = styled.div<{ collapsed?: boolean }>`
   margin: var(--sidebar-offset-top) var(--sidebar-margin-horizontal) 0
     var(--sidebar-margin-horizontal);
   padding: 0 0 var(--sidebar-header-padding-bottom) 0;

package/src/components/SkipContent/SkipContent.tsx

@@ -0,0 +1,47 @@
+import React, { useCallback } from 'react';
+import styled from 'styled-components';
+
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { CONTENT_ID } from '@redocly/theme/core/constants';
+
+export function SkipContent(): React.JSX.Element {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+
+  const handleSkipClick = useCallback((event: React.MouseEvent<HTMLAnchorElement>) => {
+    event.preventDefault();
+    const mainElement = document.getElementById(CONTENT_ID);
+    if (mainElement) {
+      mainElement.focus();
+    }
+  }, []);
+
+  return (
+    <SkipContentLint href={`#${CONTENT_ID}`} onClick={handleSkipClick}>
+      {translate('page.skipToContent.label', 'Skip to content')}
+    </SkipContentLint>
+  );
+}
+
+const SkipContentLint = styled.a`
+  position: absolute;
+  left: -9999px;
+  top: 8px;
+  z-index: 1000;
+  opacity: 0;
+  text-decoration: none;
+
+  background: var(--skip-content-background-color);
+  color: var(--skip-content-text-color);
+  padding: var(--skip-content-padding);
+
+  border-radius: var(--skip-content-border-radius);
+  border: var(--skip-content-border);
+  font-size: var(--skip-content-font-size);
+  font-weight: var(--skip-content-font-weight);
+
+  &:focus {
+    left: 8px;
+    opacity: 1;
+  }
+`;

package/src/components/SkipContent/variables.ts

@@ -0,0 +1,20 @@
+import { css } from 'styled-components';
+
+export const skipContent = css`
+	/**
+	 * @tokens SkipContent Base
+	 */
+
+	--skip-content-text-color: var(--color-blue-7);
+	--skip-content-font-size: var(--font-size-xl);
+	--skip-content-font-weight: var(--font-weight-bold);
+	--skip-content-background-color: var(--bg-color);
+	--skip-content-border-color: var(--color-blue-7);
+	--skip-content-padding: var(--spacing-xs) var(--spacing-md);
+	--skip-content-border-radius: 100px;
+	--skip-content-border: 1px solid var(--skip-content-border-color);
+	--tooltip-padding: var(--tooltip-padding-vertical) var(--tooltip-padding-horizontal);
+	--tooltip-max-width: 250px;
+
+	// @tokens End
+`;

package/src/components/Tag/Tag.tsx

@@ -46,9 +46,11 @@ export type TagProps = {
   icon?: React.ReactNode;
   active?: boolean;
   tabIndex?: number;
+  style?: React.CSSProperties;
   onClick?: (event: React.MouseEvent) => void;
   onKeyDown?: (event: React.KeyboardEvent) => void;
   onClose?: (event: React.MouseEvent) => void;
+  maxLength?: number;
 };
 
 export function Tag({
@@ -65,8 +67,72 @@ export function Tag({
   borderless,
   withStatusDot,
   statusDotColor = 'var(--tag-status-dot-color-default)',
+  maxLength,
   ...otherProps
 }: TagProps): JSX.Element {
+  const truncateText = (text: string, maxLen: number): string => {
+    if (text.length <= maxLen) return text;
+    return text.slice(0, maxLen) + '...';
+  };
+
+  const extractTextFromElement = (element: React.ReactNode): string => {
+    if (typeof element === 'string') {
+      return element;
+    }
+    if (typeof element === 'number') {
+      return element.toString();
+    }
+    if (React.isValidElement(element)) {
+      const props = element.props as { children?: React.ReactNode };
+      if (typeof props.children === 'string') {
+        return props.children;
+      }
+    }
+    return '';
+  };
+
+  const truncateJSXElement = (element: React.ReactNode, maxLen: number): React.ReactNode => {
+    if (typeof element === 'string') {
+      return truncateText(element, maxLen);
+    }
+    if (typeof element === 'number') {
+      const numStr = element.toString();
+      return numStr.length > maxLen ? truncateText(numStr, maxLen) : element;
+    }
+    if (React.isValidElement(element)) {
+      const textContent = extractTextFromElement(element);
+      if (textContent.length <= maxLen) {
+        return element;
+      }
+
+      const props = element.props as { children?: React.ReactNode };
+
+      if (typeof props.children === 'string') {
+        return React.cloneElement(element, {
+          ...props,
+          children: truncateText(props.children, maxLen),
+        } as any);
+      }
+    }
+    return element;
+  };
+
+  const renderChildren = (): React.ReactNode => {
+    if (!maxLength) {
+      return children;
+    }
+
+    if (typeof children === 'string') {
+      return truncateText(children, maxLength);
+    }
+
+    if (React.isValidElement(children)) {
+      return truncateJSXElement(children, maxLength);
+    }
+
+    return children;
+  };
+
   return (
     <TagWrapper
       tabIndex={tabIndex}
@@ -80,7 +146,7 @@ export function Tag({
       {...otherProps}
     >
       {withStatusDot ? <StatusDot color={statusDotColor} /> : icon ? icon : null}
-      <ContentWrapper>{children}</ContentWrapper>
+      <ContentWrapper>{renderChildren()}</ContentWrapper>
       {closable && (
         <CloseButton
           onClick={(event) => {

package/src/components/Tag/variables.ts

@@ -160,6 +160,27 @@ export const tag = css`
     --tag-close-button-bg-color-hover: var(--color-warm-grey-3); // @presenter Color
   }
 
+  .tag-grass {
+    --tag-color: var(--color-grass-8); // @presenter Color
+    --tag-bg-color: transparent; // @presenter Color
+    --tag-border-color: var(--color-grass-4); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-grass-1); // @presenter Color
+  }
+  
+  .tag-purple {
+    --tag-color: var(--color-purple-7); // @presenter Color
+    --tag-bg-color: transparent; // @presenter Color
+    --tag-border-color: var(--color-purple-4); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-purple-1); // @presenter Color
+  }
+
+  .tag-sky {
+    --tag-color: var(--color-sky-9); // @presenter Color
+    --tag-bg-color: transparent; // @presenter Color
+    --tag-border-color: var(--color-sky-5); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-sky-2); // @presenter Color
+  }
+
   /**
     * @tokens Tag http
     */

package/src/components/Tooltip/Tooltip.tsx

@@ -13,6 +13,7 @@ export type TooltipProps = {
   className?: string;
   width?: string;
   dataTestId?: string;
+  disabled?: boolean;
 };
 
 export function TooltipComponent({
@@ -24,6 +25,7 @@ export function TooltipComponent({
   className = 'default',
   width,
   dataTestId,
+  disabled = false,
 }: PropsWithChildren<TooltipProps>): JSX.Element {
   const ref = useRef<HTMLDivElement | null>(null);
   const { isOpened, handleOpen, handleClose } = useControl(isOpen);
@@ -33,20 +35,21 @@ export function TooltipComponent({
   const isControlled = isOpen !== undefined;
 
   useEffect(() => {
-    if (isControlled) {
+    if (isControlled && !disabled) {
       if (isOpen) {
         handleOpen();
       } else {
         handleClose();
       }
     }
-  }, [isOpen, isControlled, handleOpen, handleClose]);
+  }, [isOpen, isControlled, handleOpen, handleClose, disabled]);
 
-  const controllers = !isControlled && {
-    onMouseEnter: handleOpen,
-    onMouseLeave: handleClose,
-    onClick: handleClose,
-  };
+  const controllers = !isControlled &&
+    !disabled && {
+      onMouseEnter: handleOpen,
+      onMouseLeave: handleClose,
+      onClick: handleClose,
+    };
 
   return (
     <TooltipWrapper
@@ -56,7 +59,7 @@ export function TooltipComponent({
       data-component-name="Tooltip/Tooltip"
     >
       {children}
-      {isOpened && (
+      {isOpened && !disabled && (
         <TooltipBody
           data-testid={dataTestId || (typeof tip === 'string' ? tip : '')}
           placement={placement}
@@ -83,10 +86,11 @@ const PLACEMENTS = {
       withArrow &&
       css`
         &::after {
-          border-left: 5px solid transparent;
-          border-right: 5px solid transparent;
-          border-top-width: 6px;
+          border-left: 6px solid transparent;
+          border-right: 6px solid transparent;
+          border-top-width: 8px;
           border-top-style: solid;
+          border-radius: 2px 2px 0 0;
           bottom: 0;
           left: 50%;
           transform: translate(-50%, 99%);
@@ -103,10 +107,11 @@ const PLACEMENTS = {
       withArrow &&
       css`
         &::after {
-          border-left: 5px solid transparent;
-          border-right: 5px solid transparent;
-          border-bottom-width: 6px;
+          border-left: 6px solid transparent;
+          border-right: 6px solid transparent;
+          border-bottom-width: 8px;
           border-bottom-style: solid;
+          border-radius: 0 0 2px 2px;
           top: 0;
           left: 50%;
           transform: translate(-50%, -99%);
@@ -123,10 +128,11 @@ const PLACEMENTS = {
       withArrow &&
       css`
         &::after {
-          border-top: 5px solid transparent;
-          border-bottom: 5px solid transparent;
-          border-left-width: 6px;
+          border-top: 6px solid transparent;
+          border-bottom: 6px solid transparent;
+          border-left-width: 8px;
           border-left-style: solid;
+          border-radius: 2px 0 0 2px;
           top: 50%;
           right: 0;
           transform: translate(99%, -50%);
@@ -143,10 +149,11 @@ const PLACEMENTS = {
       withArrow &&
       css`
         &::after {
-          border-top: 5px solid transparent;
-          border-bottom: 5px solid transparent;
-          border-right-width: 6px;
+          border-top: 6px solid transparent;
+          border-bottom: 6px solid transparent;
+          border-right-width: 8px;
           border-right-style: solid;
+          border-radius: 0 2px 2px 0;
           top: 50%;
           left: 0;
           transform: translate(-99%, -50%);
@@ -173,7 +180,7 @@ const TooltipBody = styled.span<
   white-space: normal;
   overflow-wrap: break-word;
 
-  border-radius: var(--border-radius);
+  border-radius: var(--border-radius-md);
   transition: opacity 0.3s ease-out;
 
   font-size: 13px;
@@ -187,11 +194,13 @@ const TooltipBody = styled.span<
     display: inline-block;
     width: 0;
     height: 0;
-    border-color: var(--tooltip-bg-color);
+    border-color: var(--tooltip-arrow-color, var(--tooltip-bg-color));
   }
 
   background: var(--tooltip-bg-color);
   color: var(--tooltip-text-color);
+  border: var(--tooltip-border-width, 0) var(--tooltip-border-style, solid)
+    var(--tooltip-border-color, transparent);
   box-shadow: rgb(0 0 0 / 25%) 0 2px 4px;
 
   width: ${({ width }) => width || '120px'};

package/src/components/Tooltip/variables.ts

@@ -8,6 +8,10 @@ export const tooltip = css`
 
   --tooltip-text-color: var(--text-color-secondary);
   --tooltip-bg-color: var(--bg-color-raised);
+  --tooltip-arrow-color: var(--tooltip-bg-color);
+  --tooltip-border-width: 0;
+  --tooltip-border-style: solid;
+  --tooltip-border-color: transparent;
   --tooltip-padding-vertical: var(--spacing-xs);
   --tooltip-padding-horizontal: var(--spacing-sm);
   --tooltip-padding: var(--tooltip-padding-vertical) var(--tooltip-padding-horizontal);
@@ -16,6 +20,19 @@ export const tooltip = css`
   .tooltip-copy-button {
     --tooltip-text-color: var(--text-color-secondary);
     --tooltip-bg-color: var(--bg-color-raised);
+    --tooltip-arrow-color: var(--tooltip-bg-color);
+  }
+
+  .tooltip-catalog {
+    --tooltip-text-color: var(--text-color-primary);
+    --tooltip-bg-color: var(--layer-color);
+    --tooltip-arrow-color: var(--border-color-secondary);
+    --tooltip-border-width: 2px;
+    --tooltip-border-color: var(--border-color-secondary);
+    --tooltip-padding-vertical: var(--spacing-xs);
+    --tooltip-padding-horizontal: var(--spacing-sm);
+    --tooltip-padding: var(--tooltip-padding-vertical) var(--tooltip-padding-horizontal);
+    --tooltip-max-width: 300px;
   }
 
   // @tokens End

package/src/components/VersionPicker/VersionPicker.tsx

@@ -35,8 +35,15 @@ export function VersionPicker(props: { versions?: Version[]; onChange: (v: Versi
   if (!options.length && !versionPicker?.showForUnversioned) return null;
 
   return (
-    <VersionsPickerWrapper data-component-name="VersionPicker/VersionPicker">
-      <VersionPickerLabel data-translation-key="versionPicker.label">
+    <VersionsPickerWrapper
+      data-component-name="VersionPicker/VersionPicker"
+      role="region"
+      aria-label={translate('versionPicker.label', 'Version selector')}
+    >
+      <VersionPickerLabel
+        data-translation-key="versionPicker.label"
+        htmlFor="version-picker-select"
+      >
         {translate('versionPicker.label', 'Version:')}
       </VersionPickerLabel>
       <VersionPickerSelect
@@ -45,7 +52,15 @@ export function VersionPicker(props: { versions?: Version[]; onChange: (v: Versi
         options={options}
         value={value}
         onChange={handleOnChange}
+        dataAttributes={{
+          id: 'version-picker-select',
+          'aria-describedby': 'version-picker-description',
+          'aria-label': translate('versionPicker.label', 'Select version'),
+        }}
       />
+      <SrOnly id="version-picker-description">
+        This is version picker select, using it you can select a version of the API.
+      </SrOnly>
     </VersionsPickerWrapper>
   );
 }
@@ -72,6 +87,10 @@ export const VersionPickerSelect = styled(Select)<SelectProps>`
     border-radius: var(--version-picker-input-border-radius);
     padding: var(--version-picker-input-padding-vertical)
       var(--version-picker-input-padding-horizontal);
+
+    &:focus-within {
+      outline: 1px solid var(--version-picker-focus-outline-color);
+    }
   }
 `;
 
@@ -83,4 +102,15 @@ const VersionsPickerWrapper = styled.div`
   justify-content: space-between;
   padding: var(--version-picker-padding-vertical) var(--version-picker-padding-horizontal);
   border-bottom: var(--version-picker-border-bottom);
+
+  &:focus-visible {
+    outline: 1px solid var(--version-picker-focus-outline-color);
+  }
+`;
+
+const SrOnly = styled.span`
+  position: absolute;
+  width: 0;
+  height: 0;
+  overflow: hidden;
 `;

package/src/components/VersionPicker/variables.ts

@@ -35,5 +35,6 @@ export const versionPicker = css`
   --version-picker-list-item-bg-color-active: var(--select-list-item-bg-color-active); // @presenter Color
   --version-picker-list-item-bg-color-hover: var(--select-list-item-bg-color-hover); // @presenter Color
 
+  --version-picker-focus-outline-color: var(--button-border-color-focused);
   // @tokens End
 `;

package/src/core/constants/catalog.ts

@@ -0,0 +1 @@
+export const CATALOG_TAG_MAX_LENGTH = 15;

package/src/core/constants/common.ts

@@ -1,5 +1,6 @@
 export { REDOCLY_TEAMS_RBAC } from '@redocly/config';
 export const DEFAULT_LOCALE_PLACEHOLDER = 'default_locale';
+export const CONTENT_ID = 'content';
 
 export enum FEEDBACK_TYPES {
   RATING = 'rating',

package/src/core/constants/index.ts

@@ -2,3 +2,4 @@ export * from '@redocly/theme/core/constants/common';
 export * from '@redocly/theme/core/constants/environments';
 export * from '@redocly/theme/core/constants/code-walkthrough';
 export * from '@redocly/theme/core/constants/search';
+export * from '@redocly/theme/core/constants/catalog';

package/src/core/constants/search.ts

@@ -38,4 +38,6 @@ export const AI_SEARCH_ERROR_CONFIG: Record<AiSearchError, AiSearchErrorConfig>
   [AiSearchError.ErrorProcessingResponse]: defaultErrorConfig,
 } as const;
 
+export const AI_SEARCH_MAX_MESSAGE_LENGTH = 45000;
+
 export const SEARCH_DEBOUNCE_TIME_MS = 300;

package/src/core/contexts/CodeWalkthrough/CodeWalkthroughStepsContext.tsx

@@ -1,10 +1,13 @@
 import { createContext } from 'react';
 
-import type { WalkthroughStepsState } from '@redocly/theme/core/hooks';
+import type { WalkthroughStepsState } from '@redocly/theme/core/types';
 
 export const CodeWalkthroughStepsContext = createContext<WalkthroughStepsState>({
+  markers: {},
   activeStep: null,
   setActiveStep: () => {},
-  register: () => {},
-  unregister: () => {},
+  registerStep: () => {},
+  registerMarker: () => {},
+  removeMarker: () => {},
+  removeStep: () => {},
 });

package/src/core/hooks/__mocks__/use-theme-hooks.ts

@@ -85,4 +85,5 @@ export const useThemeHooks = jest.fn(() => ({
     submitFeedback: jest.fn(),
   })),
   useLoadAndNavigate: jest.fn(),
+  usePageProps: jest.fn().mockReturnValue({}),
 }));

package/src/core/hooks/catalog/useCatalogEntities.ts

@@ -0,0 +1,16 @@
+import type { UseCatalogEntitiesProps } from '@redocly/theme';
+
+export function useCatalogEntities({ entitiesTypes, excludedEntities }: UseCatalogEntitiesProps) {
+  const initialTypesWithoutAll = entitiesTypes.filter((type) => type !== 'all');
+  const initialTypesFilter = entitiesTypes.length ? `type:${initialTypesWithoutAll.join(',')}` : '';
+  const initialExcludedEntitiesFilter = excludedEntities?.length
+    ? `-key:${excludedEntities.map((entity) => entity.key).join(',')}`
+    : '';
+  const initialFilter = initialTypesFilter
+    ? `${initialTypesFilter} AND ${initialExcludedEntitiesFilter}`
+    : initialExcludedEntitiesFilter;
+
+  return {
+    initialFilter,
+  };
+}

package/src/core/hooks/catalog/useCatalogTableHeaderCellActions.ts

@@ -0,0 +1,38 @@
+import {
+  BaseEntity,
+  CatalogColumn,
+} from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTableView';
+
+import { SortOption } from '../../types';
+
+type CatalogTableHeaderCellActionsProps<T extends BaseEntity> = {
+  column: CatalogColumn<T>;
+  handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
+  setSortOption: (sortOption: SortOption | null) => void;
+  isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
+};
+
+export function useCatalogTableHeaderCellActions<T extends BaseEntity>({
+  column,
+  handleSortClick,
+  setSortOption,
+  isColumnSorted,
+}: CatalogTableHeaderCellActionsProps<T>) {
+  const sortKey = column.sortKey;
+  const isUpActive = sortKey ? isColumnSorted(sortKey, 'desc') : false;
+  const isDownActive = sortKey ? isColumnSorted(sortKey, 'asc') : false;
+
+  const handleCellClick = (): void => {
+    if (!column.sortable || !sortKey) return;
+
+    if (isDownActive) {
+      handleSortClick(sortKey, 'desc');
+    } else if (isUpActive) {
+      setSortOption(null);
+    } else {
+      handleSortClick(sortKey, 'asc');
+    }
+  };
+
+  return { handleCellClick, sortKey, isUpActive, isDownActive };
+}

package/src/core/hooks/catalog/useCatalogTableViewRow.ts

@@ -0,0 +1,40 @@
+import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
+
+import { getPathPrefix } from '../../utils';
+
+type CatalogTableViewRowProps = {
+  entityKey: string;
+  entityType: string;
+  catalogConfig: CatalogEntityConfig;
+  entitiesCatalogConfig?: EntitiesCatalogConfig;
+};
+
+export function useCatalogTableViewRow({
+  entityKey,
+  entityType,
+  catalogConfig,
+  entitiesCatalogConfig,
+}: CatalogTableViewRowProps) {
+  const getCatalogSpecificConfigByEntityTypeIncluded = () => {
+    if (!entitiesCatalogConfig) {
+      return;
+    }
+
+    return Object.values(entitiesCatalogConfig.catalogs ?? {}).find((catalog) => {
+      return catalog.includes?.some((include) => include.type === entityType);
+    });
+  };
+
+  const getEntityDetailsLink = () => {
+    const pathPrefix = getPathPrefix();
+    const catalogSpecificConfig = getCatalogSpecificConfigByEntityTypeIncluded();
+
+    if (!catalogSpecificConfig || !entitiesCatalogConfig) {
+      return `${pathPrefix}/catalogs/${catalogConfig.slug}/entities/${entityKey}`;
+    }
+
+    return `${pathPrefix}/catalogs/${catalogSpecificConfig.slug}/entities/${entityKey}`;
+  };
+
+  return { getEntityDetailsLink };
+}