@redocly/theme 0.56.0-next.2 → 0.56.0-next.3

package/src/core/hooks/use-color-switcher.ts

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 
-import { useThemeConfig, useThemeHooks } from '@redocly/theme/core/hooks';
+import { useThemeConfig } from './use-theme-config';
+import { useThemeHooks } from './use-theme-hooks';
 
 export const useColorSwitcher = () => {
   const themeSettings = useThemeConfig();

package/src/core/hooks/use-input-key-commands.ts

@@ -1,6 +1,6 @@
 import { useCallback, useMemo } from 'react';
 
-import { getUserAgent } from '@redocly/theme/core/utils';
+import { getUserAgent } from '../utils/get-user-agent';
 
 type Action = 'selectAll' | 'escape' | 'clear' | 'enter' | 'paste';
 type ActionHandlers = {

package/src/core/hooks/use-language-picker.ts

@@ -1,9 +1,9 @@
 import { useNavigate } from 'react-router-dom';
 
-import type { L10nConfig } from '@redocly/theme/core/types';
+import type { L10nConfig } from '../types/hooks';
 
-import { useThemeHooks } from '@redocly/theme/core/hooks';
-import { getPathnameForLocale, withPathPrefix, withoutPathPrefix } from '@redocly/theme/core/utils';
+import { useThemeHooks } from './use-theme-hooks';
+import { getPathnameForLocale, withPathPrefix, withoutPathPrefix } from '../utils/urls';
 
 export function useLanguagePicker(): {
   currentLocale: L10nConfig['locales'][number] | undefined;

package/src/core/hooks/use-mobile-menu.ts

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 
-import { useModalScrollLock } from '@redocly/theme/core/hooks';
+import { useModalScrollLock } from './use-modal-scroll-lock';
 
 export function useMobileMenu(initialState = false) {
   const location = useLocation();

package/src/core/hooks/use-navbar-height.ts

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 
 import type { Location } from 'react-router-dom';
 
-import { getNavbarElement } from '@redocly/theme/core/utils';
+import { getNavbarElement } from '../utils/get-navbar-element';
 
 export type UseNavbarHeightReturnType = number;
 

package/src/core/hooks/use-page-versions.ts

@@ -1,4 +1,4 @@
-import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { useThemeHooks } from './use-theme-hooks';
 
 export type PageVersion = {
   active: boolean;

package/src/core/hooks/use-product-picker.ts

@@ -1,6 +1,6 @@
 import { useNavigate } from 'react-router-dom';
 
-import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { useThemeHooks } from './use-theme-hooks';
 
 export function useProductPicker() {
   const { useCurrentProduct, useProducts, useTelemetry, useLoadAndNavigate } = useThemeHooks();

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

@@ -1,8 +1,8 @@
 import { useContext } from 'react';
 
-import type { UiAccessibleConfig } from '@redocly/theme/config';
+import type { UiAccessibleConfig } from '../../config';
 
-import { ThemeDataContext } from '@redocly/theme/core/contexts';
+import { ThemeDataContext } from '../contexts/ThemeDataContext';
 
 // TODO: rename and additionally export as alias for backward compatibility
 export function useThemeConfig<T extends Record<string, unknown>>(

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

@@ -1,8 +1,8 @@
 import { useContext } from 'react';
 
-import type { ThemeHooks } from '@redocly/theme/core/types';
+import type { ThemeHooks } from '../types/hooks';
 
-import { ThemeDataContext } from '@redocly/theme/core/contexts';
+import { ThemeDataContext } from '../contexts/ThemeDataContext';
 
 const fallbacks = {
   useTranslate: () => ({

package/src/core/hooks/use-time-ago.ts

@@ -1,8 +1,9 @@
 import { useCallback } from 'react';
 
-import type { Plural, TranslationKey } from '@redocly/theme/core/types';
+import type { Plural } from '../types/common';
+import type { TranslationKey } from '../types/l10n';
 
-import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { useThemeHooks } from './use-theme-hooks';
 
 const timeUnits = ['second', 'minute', 'hour', 'day', 'week', 'month', 'year'] as const;
 const timeUnitConversions = [

package/src/core/hooks/use-user-teams.ts

@@ -1,4 +1,4 @@
-import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { useThemeHooks } from './use-theme-hooks';
 
 export function useUserTeams() {
   const { useUserTeams } = useThemeHooks();

package/src/core/index.ts

@@ -1,7 +1,7 @@
-export * from '@redocly/theme/core/constants';
-export * from '@redocly/theme/core/contexts';
-export * from '@redocly/theme/core/hoc';
-export * from '@redocly/theme/core/hooks';
-export * from '@redocly/theme/core/types';
-export * from '@redocly/theme/core/utils';
-export * from '@redocly/theme/core/styles';
+export * from './constants';
+export * from './contexts';
+export * from './hoc';
+export * from './hooks';
+export * from './types';
+export * from './utils';
+export * from './styles';

package/src/core/openapi/index.ts

@@ -0,0 +1,31 @@
+// This file is intended to provide selective imports from @redocly/theme/core
+// to reduce bundle size by exporting only functionality used in the @redocly/openapi-docs package.
+//
+// This selective import approach will help with tree shaking and reduce
+// the overall bundle size by avoiding importing the entire theme package
+// when only specific functionality is needed.
+export { IS_BROWSER } from '../utils/dom';
+export {
+  addLeadingSlash,
+  removeLeadingSlash,
+  getPathPrefix,
+  combineUrls,
+  addTrailingSlash,
+  withPathPrefix,
+} from '../utils/urls';
+export { typedMemo } from '../hoc/typedMemo';
+export { useMount } from '../hooks/use-mount';
+export { GlobalStyle } from '../styles/global';
+export { breakpoints } from '../utils/media-css';
+export { isPrimitive } from '../utils/args-typecheck';
+export type { UserClaims } from '../types/user-claims';
+export { useFocusTrap } from '../hooks/use-focus-trap';
+export type { TFunction, TOptions } from '../types/l10n';
+export { useThemeHooks } from '../hooks/use-theme-hooks';
+export { useOutsideClick } from '../hooks/use-outside-click';
+export type { SelectOption, SelectProps } from '../types/select';
+export { useActiveSectionId } from '../hooks/use-active-section-id';
+export { useModalScrollLock } from '../hooks/use-modal-scroll-lock';
+export { SecurityVariablesEnvSuffix } from '../constants/environments';
+export { isUndefined, isString, isNotNull, isObject } from '../utils/type-guards';
+export { ThemeDataContext, type ThemeDataTransferObject } from '../contexts/ThemeDataContext';

package/src/core/styles/global.ts

@@ -1,6 +1,5 @@
 import { createGlobalStyle, css } from 'styled-components';
 
-import { darkMode } from '@redocly/theme/core/styles/dark';
 import { languagePicker } from '@redocly/theme/components/LanguagePicker/variables';
 import { scorecard } from '@redocly/theme/components/Scorecard/variables';
 import { feedback } from '@redocly/theme/components/Feedback/variables';
@@ -40,6 +39,8 @@ import { cards } from '@redocly/theme/markdoc/components/Cards/variables';
 import { codeWalkthrough } from '@redocly/theme/markdoc/components/CodeWalkthrough/variables';
 import { skipContent } from '@redocly/theme/components/SkipContent/variables';
 
+import { darkMode } from './dark';
+
 const themeColors = css`
   /* === Palette === */
   /**

package/src/core/styles/index.ts

@@ -1,2 +1,2 @@
-export * from '@redocly/theme/core/styles/global';
-export * from '@redocly/theme/core/styles/dark';
+export * from './global';
+export * from './dark';

package/src/core/templates/Markdown.tsx

@@ -1,17 +1,21 @@
 import * as React from 'react';
 import { useLocation } from 'react-router-dom';
 
-import type { UiAccessibleConfig } from '@redocly/theme/config';
-import type { MdHeading, FeedbackProps } from '@redocly/theme/core/types';
+import type { UiAccessibleConfig } from '../../config';
+import type { FeedbackProps } from '../types/feedback';
+import type { MdHeading } from '../types/markdown';
 
-import { useThemeConfig, useThemeHooks } from '@redocly/theme/core/hooks';
 import { DocumentationLayout } from '@redocly/theme/layouts/DocumentationLayout';
 import { Markdown } from '@redocly/theme/components/Markdown/Markdown';
 import { TableOfContent } from '@redocly/theme/components/TableOfContent/TableOfContent';
 import { Feedback } from '@redocly/theme/components/Feedback/Feedback';
-import { IS_BROWSER, onDocumentReady, extendDetailsBehaviour } from '@redocly/theme/core/utils';
 import { CodeWalkthroughLayout } from '@redocly/theme/layouts/CodeWalkthroughLayout';
 
+import { IS_BROWSER, onDocumentReady } from '../utils/dom';
+import { extendDetailsBehaviour } from '../utils/details';
+import { useThemeHooks } from '../hooks/use-theme-hooks';
+import { useThemeConfig } from '../hooks/use-theme-config';
+
 export type MarkdownTemplateProps = {
   pageProps: {
     frontmatter?: UiAccessibleConfig;

package/src/core/types/catalog.ts

@@ -3,6 +3,8 @@ import { CatalogEntityConfig, LayoutVariant } from '@redocly/config';
 
 import type { CatalogFilterConfig } from '@redocly/theme/config';
 
+import { ENTITY_RELATION_TYPES } from '../constants/catalog';
+
 export type SortOption = 'title' | '-title' | 'type' | '-type';
 
 export type UseCatalogResponse = {
@@ -103,7 +105,14 @@ export type UseCatalogEntitiesResponse = {
   setEntitiesCounter: (counter: number) => void;
 };
 
-export type EntityType = 'service' | 'domain' | 'team' | 'user' | 'api-description';
+export type EntityType =
+  | 'service'
+  | 'domain'
+  | 'team'
+  | 'user'
+  | 'api-description'
+  | 'data-schema'
+  | 'api-operation';
 
 export type CatalogViewMode = 'cards' | 'table';
 
@@ -121,6 +130,8 @@ export type BffCatalogRelatedEntity = {
   title: string;
   summary?: string | null;
   readonly source: 'api' | 'file';
+  relationRole: 'source' | 'target';
+  relationType: EntityRelationType;
   sourceFile?: string | null;
   metadata?: Record<string, any>;
   readonly createdAt: string | null;
@@ -137,7 +148,7 @@ export type BffCatalogEntity = {
   readonly source: 'api' | 'file';
   domains?: Array<BffCatalogRelatedEntity>;
   owners?: Array<BffCatalogRelatedEntity>;
-  summary?: string;
+  summary?: string | null;
   tags?: Array<string>;
   metadata?: Record<string, any>;
   git?: Array<string>;
@@ -178,3 +189,5 @@ export type Page = {
   limit: number;
   total: number;
 };
+
+export type EntityRelationType = (typeof ENTITY_RELATION_TYPES)[number];

package/src/core/types/code-walkthrough.ts

@@ -1,4 +1,4 @@
-import type { MarkerArea } from '@redocly/theme/core/types';
+import type { MarkerArea } from './marker';
 
 export type ActiveStep = string | null;
 

package/src/core/types/feedback.ts

@@ -1,9 +1,9 @@
-import type { FEEDBACK_TYPES } from '@redocly/theme/core/constants';
-import type { SentimentProps } from '@redocly/theme/components/Feedback/Sentiment';
-import type { CommentProps } from '@redocly/theme/components/Feedback/Comment';
-import type { MoodProps } from '@redocly/theme/components/Feedback/Mood';
-import type { ScaleProps } from '@redocly/theme/components/Feedback/Scale';
-import type { RatingProps } from '@redocly/theme/components/Feedback/Rating';
+import type { FEEDBACK_TYPES } from '../constants/common';
+import type { SentimentProps } from '../../components/Feedback/Sentiment';
+import type { CommentProps } from '../../components/Feedback/Comment';
+import type { MoodProps } from '../../components/Feedback/Mood';
+import type { ScaleProps } from '../../components/Feedback/Scale';
+import type { RatingProps } from '../../components/Feedback/Rating';
 
 export type SubmitFeedbackParams = {
   type: string;

package/src/core/types/filter.ts

@@ -1,4 +1,4 @@
-import type { ResolvedFilter } from '@redocly/theme/core/types';
+import type { ResolvedFilter } from './catalog';
 import type { RedoclyConfig } from '@redocly/config';
 
 export type FilterProps = {

package/src/core/types/hooks.ts

@@ -9,34 +9,35 @@ import type { Callback, TFunction as TFunc } from 'i18next';
 import type { To, Location, NavigateFunction } from 'react-router-dom';
 import type { CatalogConfig, ProductUiConfig } from '@redocly/theme/config';
 import type {
-  UserMenuData,
   UseCatalogResponse,
-  ItemState,
-  SearchItemData,
-  SubmitFeedbackParams,
-  TFunction,
-  BreadcrumbItem,
-  DrilldownMenuItemDetails,
-  SearchFacet,
-  SearchFilterItem,
-  SearchFacetQuery,
-  AiSearchConversationItem,
   CatalogApiResults,
   CatalogApiParams,
   FilteredCatalog,
   UseCatalogSortResponse,
   UseCatalogSearchResponse,
-  EventType,
-  SendEventParams,
-} from '@redocly/theme/core/types';
+} from './catalog';
+import type { UserMenuData } from './user-menu';
+import type { ItemState } from './sidebar';
+import type {
+  SearchItemData,
+  SearchFacet,
+  SearchFilterItem,
+  SearchFacetQuery,
+  AiSearchConversationItem,
+} from './search';
+import type { EventType, SendEventParams } from './telemetry';
+import type { SubmitFeedbackParams } from './feedback';
+import type { TFunction } from './l10n';
+import type { BreadcrumbItem } from './breadcrumb';
+import type { DrilldownMenuItemDetails } from './sidebar';
 
 import {
   BffCatalogEntity,
   BffCatalogEntityList,
   BffCatalogRelatedEntity,
   BffCatalogRelatedEntityList,
-} from '@redocly/theme/core/types';
-import { AiSearchError } from '@redocly/theme/core/constants';
+} from './catalog';
+import { AiSearchError } from '../constants/search';
 
 export type ThemeHooks = {
   useTranslate: () => { translate: TFunction };

package/src/core/types/index.ts

@@ -1,18 +1,18 @@
-export * from '@redocly/theme/core/types/breadcrumb';
-export * from '@redocly/theme/core/types/catalog';
-export * from '@redocly/theme/core/types/l10n';
-export * from '@redocly/theme/core/types/feedback';
-export * from '@redocly/theme/core/types/hooks';
-export * from '@redocly/theme/core/types/markdown';
-export * from '@redocly/theme/core/types/navbar';
-export * from '@redocly/theme/core/types/search';
-export * from '@redocly/theme/core/types/select';
-export * from '@redocly/theme/core/types/sidebar';
-export * from '@redocly/theme/core/types/filter';
-export * from '@redocly/theme/core/types/user-menu';
-export * from '@redocly/theme/core/types/user-claims';
-export * from '@redocly/theme/core/types/common';
-export * from '@redocly/theme/core/types/open-api-server';
-export * from '@redocly/theme/core/types/marker';
-export * from '@redocly/theme/core/types/code-walkthrough';
-export * from '@redocly/theme/core/types/telemetry';
+export * from './breadcrumb';
+export * from './catalog';
+export * from './l10n';
+export * from './feedback';
+export * from './hooks';
+export * from './markdown';
+export * from './navbar';
+export * from './search';
+export * from './select';
+export * from './sidebar';
+export * from './filter';
+export * from './user-menu';
+export * from './user-claims';
+export * from './common';
+export * from './open-api-server';
+export * from './marker';
+export * from './code-walkthrough';
+export * from './telemetry';

package/src/core/types/search.ts

@@ -1,6 +1,6 @@
 import type { ItemBadge, REDOCLY_ROUTE_RBAC } from '@redocly/config';
 import type { ProductConfig } from '@redocly/theme/config';
-import type { AiSearchConversationRole } from '@redocly/theme/core/constants';
+import type { AiSearchConversationRole } from '../constants/search';
 
 export type OperationParameter = {
   name: string | string[];

package/src/core/types/sidebar.ts

@@ -5,7 +5,7 @@ import type {
   RbacScopeItems,
   ItemBadge,
 } from '@redocly/config';
-import type { MenuItemType } from '@redocly/theme/core/constants';
+import type { MenuItemType } from '../constants/common';
 export type { MenuStyle } from '@redocly/config';
 
 export type SidebarNavItem = {

package/src/core/utils/download-code-walkthrough.ts

@@ -3,11 +3,9 @@ import JSZip from 'jszip';
 
 import type { CodeWalkthroughFile } from '@redocly/config';
 
-import {
-  findClosestCommonDirectory,
-  getCodeWalkthroughFileText,
-  removeLeadingSlash,
-} from '@redocly/theme/core/utils';
+import { removeLeadingSlash } from './urls';
+import { findClosestCommonDirectory } from './find-closest-common-directory';
+import { getCodeWalkthroughFileText } from './get-code-walkthrough-file-text';
 
 // https://github.com/Stuk/jszip/issues/196#issuecomment-69503828
 JSZip.support.nodebuffer = false;

package/src/core/utils/get-code-walkthrough-file-text.ts

@@ -1,6 +1,7 @@
 import type { CodeWalkthroughFile, CodeWalkthroughNode } from '@redocly/config';
 
-import { matchCodeWalkthroughConditions, replaceInputsWithValue } from '@redocly/theme/core/utils';
+import { matchCodeWalkthroughConditions } from './match-code-walkthrough-conditions';
+import { replaceInputsWithValue } from './replace-inputs-with-value';
 
 export function getCodeWalkthroughFileText(
   file: CodeWalkthroughFile,

package/src/core/utils/index.ts

@@ -1,35 +1,35 @@
-export * from '@redocly/theme/core/utils/clipboard-service';
-export * from '@redocly/theme/core/utils/css-variables';
-export * from '@redocly/theme/core/utils/add-line-numbers';
-export * from '@redocly/theme/core/utils/media-css';
-export * from '@redocly/theme/core/utils/theme-helpers';
-export * from '@redocly/theme/core/utils/class-names';
-export * from '@redocly/theme/core/utils/args-typecheck';
-export * from '@redocly/theme/core/utils/color';
-export * from '@redocly/theme/core/utils/urls';
-export * from '@redocly/theme/core/utils/js-utils';
-export * from '@redocly/theme/core/utils/tags-parser';
-export * from '@redocly/theme/core/utils/text-transform';
-export * from '@redocly/theme/core/utils/dom';
-export * from '@redocly/theme/core/utils/markdoc';
-export * from '@redocly/theme/core/utils/attribute-parser';
-export * from '@redocly/theme/core/utils/type-guards';
-export * from '@redocly/theme/core/utils/dom';
-export * from '@redocly/theme/core/utils/toc';
-export * from '@redocly/theme/core/utils/menu';
-export * from '@redocly/theme/core/utils/load-and-navigate';
-export * from '@redocly/theme/core/utils/get-scorecard-color-variable';
-export * from '@redocly/theme/core/utils/change-text-casing';
-export * from '@redocly/theme/core/utils/format-date-without-timezone';
-export * from '@redocly/theme/core/utils/details';
-export * from '@redocly/theme/core/utils/get-navbar-element';
-export * from '@redocly/theme/core/utils/with-load-progress';
-export * from '@redocly/theme/core/utils/text-trimmer';
-export * from '@redocly/theme/core/utils/get-code-walkthrough-file-text';
-export * from '@redocly/theme/core/utils/download-code-walkthrough';
-export * from '@redocly/theme/core/utils/get-file-icon';
-export * from '@redocly/theme/core/utils/match-code-walkthrough-conditions';
-export * from '@redocly/theme/core/utils/replace-inputs-with-value';
-export * from '@redocly/theme/core/utils/find-closest-common-directory';
-export * from '@redocly/theme/core/utils/get-user-agent';
-export * from '@redocly/theme/core/utils/parse-style-string';
+export * from './clipboard-service';
+export * from './css-variables';
+export * from './add-line-numbers';
+export * from './media-css';
+export * from './theme-helpers';
+export * from './class-names';
+export * from './args-typecheck';
+export * from './color';
+export * from './urls';
+export * from './js-utils';
+export * from './tags-parser';
+export * from './text-transform';
+export * from './dom';
+export * from './markdoc';
+export * from './attribute-parser';
+export * from './type-guards';
+export * from './dom';
+export * from './toc';
+export * from './menu';
+export * from './load-and-navigate';
+export * from './get-scorecard-color-variable';
+export * from './change-text-casing';
+export * from './format-date-without-timezone';
+export * from './details';
+export * from './get-navbar-element';
+export * from './with-load-progress';
+export * from './text-trimmer';
+export * from './get-code-walkthrough-file-text';
+export * from './download-code-walkthrough';
+export * from './get-file-icon';
+export * from './match-code-walkthrough-conditions';
+export * from './replace-inputs-with-value';
+export * from './find-closest-common-directory';
+export * from './get-user-agent';
+export * from './parse-style-string';

package/src/core/utils/load-and-navigate.ts

@@ -1,6 +1,6 @@
 import type { NavigateFunction, NavigateOptions } from 'react-router-dom';
 
-import { withLoadProgress } from '@redocly/theme/core/utils';
+import { withLoadProgress } from './with-load-progress';
 
 export type HistoryOrigin = 'pm' | 'browser';
 

package/src/core/utils/match-code-walkthrough-conditions.ts

@@ -1,6 +1,6 @@
 import type { CodeWalkthroughConditionsObject } from '@redocly/config';
 
-import { isObject } from '@redocly/theme/core/utils';
+import { isObject } from './type-guards';
 
 export function matchCodeWalkthroughConditions(
   conditions: CodeWalkthroughConditionsObject = {},

package/src/core/utils/menu.ts

@@ -1,9 +1,10 @@
 import type { ResolvedNavItem, Version } from '@redocly/config';
 import type { Location } from 'react-router-dom';
 
-import { getPathnameForLocale, withoutPathPrefix, withPathPrefix } from '@redocly/theme/core/utils';
-import { type Locale, type TFunction, type ItemState } from '@redocly/theme/core/types';
-import { MenuItemType } from '@redocly/theme/core/constants';
+import { type Locale, type TFunction } from '../types/l10n';
+import { type ItemState } from '../types/sidebar';
+import { MenuItemType } from '../constants/common';
+import { getPathnameForLocale, withoutPathPrefix, withPathPrefix } from './urls';
 
 const TRANSLATION_KEYS = {
   version: 'mobileMenu.version',

package/src/core/utils/toc.ts

@@ -1,4 +1,4 @@
-import type { MdHeading } from '@redocly/theme/core/types';
+import type { MdHeading } from '../types/markdown';
 
 export function getDisplayedHeadings(
   headings: Array<MdHeading | null> | null | undefined,

package/src/core/utils/type-guards.ts

@@ -16,9 +16,9 @@ export function isNotNull<T>(value: T): value is NonNullable<T> {
   return !isNull(value);
 }
 
-export const isObject = (item: unknown): item is object => {
+export function isObject(item: unknown): item is object {
   return isNotNull(item) && typeof item === 'object';
-};
+}
 
 export const isNavLinkItem = (item: ResolvedNavItem): item is ResolvedNavLinkItem => {
   return item.link !== undefined;

package/src/core/utils/urls.ts

@@ -1,6 +1,6 @@
-import type { Locale } from '@redocly/theme/core/types';
+import type { Locale } from '../types/l10n';
 
-import { DEFAULT_LOCALE_PLACEHOLDER } from '@redocly/theme/core/constants';
+import { DEFAULT_LOCALE_PLACEHOLDER } from '../constants/common';
 
 export function combineUrls(baseURL: string, ...relativeURLs: (string | undefined)[]) {
   let res = baseURL;

package/src/markdoc/components/Tabs/TabList.tsx

@@ -67,6 +67,7 @@ export function TabList({
             }}
             onKeyDown={(event) => handleKeyboard(event, index)}
             onClick={() => {
+              child.props.onClick?.();
               onTabClick(label);
             }}
           />