@redocly/theme 0.58.0-next.2 → 0.58.0-next.4

package/lib/components/Catalog/Catalog.js

@@ -43,7 +43,9 @@ function Catalog(props) {
                 react_1.default.createElement(CatalogPageDescription, null,
                     react_1.default.createElement(CatalogTitleWrapper, null,
                         react_1.default.createElement(CatalogTitle, { "data-translation-key": catalogConfig === null || catalogConfig === void 0 ? void 0 : catalogConfig.titleTranslationKey },
-                            translate(catalogConfig === null || catalogConfig === void 0 ? void 0 : catalogConfig.titleTranslationKey),
+                            (catalogConfig === null || catalogConfig === void 0 ? void 0 : catalogConfig.titleTranslationKey)
+                                ? translate(catalogConfig === null || catalogConfig === void 0 ? void 0 : catalogConfig.titleTranslationKey)
+                                : catalogConfig === null || catalogConfig === void 0 ? void 0 : catalogConfig.slug,
                             ' '),
                         react_1.default.createElement(CounterTag_1.CounterTag, { borderless: true }, entitiesCounter)),
                     react_1.default.createElement(CatalogDescription, { "data-translation-key": catalogConfig === null || catalogConfig === void 0 ? void 0 : catalogConfig.descriptionTranslationKey }, translate(catalogConfig === null || catalogConfig === void 0 ? void 0 : catalogConfig.descriptionTranslationKey))),

package/lib/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityApiDescriptionRelations.js

@@ -13,7 +13,7 @@ const MoleculesIcon_1 = require("../../../../icons/MoleculesIcon/MoleculesIcon")
 const NetworkIcon_1 = require("../../../../icons/NetworkIcon/NetworkIcon");
 function CatalogEntityApiDescriptionRelations({ entity, relations, query, searchQuery, setSearchQuery, setFilter, entitiesCatalogConfig, catalogConfig, sortOption, setSortOption, handleSortClick, isColumnSorted, shouldShowLoadMore, }) {
     return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityApiDescriptionRelations" },
-        react_1.default.createElement(Tabs_1.Tabs, { forceReady: relations.length > 0, size: Tabs_1.TabsSize.MEDIUM },
+        react_1.default.createElement(Tabs_1.Tabs, { key: entity.id, forceReady: relations.length > 0, size: Tabs_1.TabsSize.MEDIUM },
             react_1.default.createElement(TabItem, { label: "Operations", icon: react_1.default.createElement(MoleculesIcon_1.MoleculesIcon, null), onClick: () => setFilter('type:api-operation') },
                 react_1.default.createElement(CatalogEntityDefaultRelations_1.CatalogEntityDefaultRelations, { key: "operations-table", entity: entity, relations: relations, query: query, searchQuery: searchQuery, setSearchQuery: setSearchQuery, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, sortOption: sortOption, setSortOption: setSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, shouldShowLoadMore: shouldShowLoadMore, shouldShowHeading: false, listType: "api-operation" })),
             react_1.default.createElement(TabItem, { label: "Schemas", icon: react_1.default.createElement(NetworkIcon_1.NetworkIcon, null), onClick: () => setFilter('type:data-schema') },

package/lib/components/Search/SearchDialog.js

@@ -190,8 +190,9 @@ function SearchDialog({ onClose, className }) {
                                 }
                             }
                         }, ref: aiQueryRef, tabIndex: 0, role: "option", "aria-selected": "true" },
-                        react_1.default.createElement(AiStarsIcon_1.AiStarsIcon, { color: "var(--search-ai-icon-color)", size: "36px", background: "var(--search-ai-icon-bg-color)", margin: "0 var(--spacing-md) 0 0", borderRadius: "var(--border-radius-lg)" }),
-                        react_1.default.createElement(Typography_1.Typography, { fontWeight: "var(--font-weight-semibold)" }, query),
+                        react_1.default.createElement(AiStarsIcon_1.AiStarsIcon, { style: { flexShrink: 0 }, color: "var(--search-ai-icon-color)", size: "36px", background: "var(--search-ai-icon-bg-color)", margin: "0 var(--spacing-md) 0 0", borderRadius: "var(--border-radius-lg)" }),
+                        react_1.default.createElement(QueryWrapper, null,
+                            react_1.default.createElement(Typography_1.Typography, { fontWeight: "var(--font-weight-semibold)" }, query)),
                         react_1.default.createElement(Typography_1.Typography, null,
                             "- ",
                             translate('search.ai.label', 'Ask AI assistant')),
@@ -268,10 +269,10 @@ const SearchDialogWrapper = styled_components_1.default.div `
   border-radius: 0;
 
   @media screen and (max-width: ${utils_1.breakpoints.small}) {
-    min-height: -webkit-fill-available !important;
-    min-height: 100dvh !important;
-    height: auto !important;
-    width: 100vw !important;
+    min-height: -webkit-fill-available;
+    min-height: 100dvh;
+    height: 100dvh;
+    width: 100vw;
   }
 
   @media screen and (min-width: ${utils_1.breakpoints.small}) {
@@ -318,6 +319,8 @@ const SearchDialogBodyMainView = styled_components_1.default.div `
 `;
 const SearchDialogBodyFilterView = styled_components_1.default.div `
   overflow: scroll;
+  max-width: var(--search-filter-width);
+  width: 100%;
 `;
 const SearchDialogFooter = styled_components_1.default.footer `
   display: flex;
@@ -439,4 +442,7 @@ const SearchWithAI = styled_components_1.default.div `
     margin-right: var(--spacing-xs);
   }
 `;
+const QueryWrapper = styled_components_1.default.div `
+  word-break: break-word;
+`;
 //# sourceMappingURL=SearchDialog.js.map

package/lib/components/Search/SearchFilter.js

@@ -43,7 +43,8 @@ function SearchFilter({ className, facets, filter, query, quickFilterFields, onF
         React.createElement(SearchFilterFields, null, facets.map((facet, index) => (React.createElement(SearchFilterField_1.SearchFilterField, { key: `${facet.field}-${index}`, facet: facet, filter: filter, query: query, quickFilterFields: quickFilterFields, onFilterChange: onFilterChange, onFacetReset: onFacetReset }))))));
 }
 const SearchFilterWrapper = styled_components_1.default.div `
-  width: var(--search-filter-width);
+  width: 100%;
+  max-width: var(--search-filter-width);
   display: flex;
   flex-direction: column;
   padding: var(--search-filter-padding);

package/lib/core/hooks/catalog/useCatalogTableViewRow.js

@@ -10,7 +10,7 @@ function useCatalogTableViewRow({ entityKey, entityType, catalogConfig, entities
         }
         return Object.values((_a = entitiesCatalogConfig.catalogs) !== null && _a !== void 0 ? _a : {}).find((catalog) => {
             var _a;
-            return (_a = catalog.includes) === null || _a === void 0 ? void 0 : _a.some((include) => include.type === entityType);
+            return (_a = catalog === null || catalog === void 0 ? void 0 : catalog.includes) === null || _a === void 0 ? void 0 : _a.some((include) => include.type === entityType);
         });
     };
     const getEntityDetailsLink = () => {

package/lib/core/hooks/use-active-section-id.js

@@ -17,6 +17,10 @@ function useActiveSectionId(location, hasOverviewPage = false, withNavbar = true
             setItemId('');
             return;
         }
+        if (window.scrollY <= 0) {
+            setItemId(sections[0].getAttribute('data-section-id') || '');
+            return;
+        }
         for (let i = 0; i < sections.length; i++) {
             const section = sections[i];
             const rect = section.getBoundingClientRect();

package/lib/core/hooks/use-telemetry-fallback.d.ts

@@ -57,4 +57,9 @@ export declare const useTelemetryFallback: () => {
     sendAsyncapiDocsMessageClickedMessage: () => void;
     sendAsyncapiDocsServerModalOpenedMessage: () => void;
     sendAsyncapiDocsDownloadDefinitionClickedMessage: () => void;
+    sendGraphqlDocsViewedMessage: () => void;
+    sendGraphqlDocsPerformanceMetricsMessage: () => void;
+    sendGraphqlDocsReferencedInLinkClickedMessage: () => void;
+    sendGraphqlDocsRequiredScopesModalOpenedMessage: () => void;
+    sendGraphqlDocsDownloadDefinitionClickedMessage: () => void;
 };

package/lib/core/hooks/use-telemetry-fallback.js

@@ -61,6 +61,11 @@ const useTelemetryFallback = () => ({
     sendAsyncapiDocsMessageClickedMessage: () => { },
     sendAsyncapiDocsServerModalOpenedMessage: () => { },
     sendAsyncapiDocsDownloadDefinitionClickedMessage: () => { },
+    sendGraphqlDocsViewedMessage: () => { },
+    sendGraphqlDocsPerformanceMetricsMessage: () => { },
+    sendGraphqlDocsReferencedInLinkClickedMessage: () => { },
+    sendGraphqlDocsRequiredScopesModalOpenedMessage: () => { },
+    sendGraphqlDocsDownloadDefinitionClickedMessage: () => { },
 });
 exports.useTelemetryFallback = useTelemetryFallback;
 //# sourceMappingURL=use-telemetry-fallback.js.map

package/lib/core/openapi/index.d.ts

@@ -1,3 +1,7 @@
+export type { UserClaims } from '../types/user-claims';
+export type { SearchDocument, SearchItemData, OperationParameter } from '../types/search';
+export type { TFunction, TOptions } from '../types/l10n';
+export type { SelectOption, SelectProps } from '../types/select';
 export { IS_BROWSER } from '../utils/dom';
 export { addLeadingSlash, removeLeadingSlash, getPathPrefix, combineUrls, addTrailingSlash, withPathPrefix, } from '../utils/urls';
 export { typedMemo } from '../hoc/typedMemo';
@@ -5,14 +9,14 @@ 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 { getUserAgent } from '../utils/get-user-agent';
 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 { useSearchDialog } from '../hooks/search/use-search-dialog';
+export { useDialogHotKeys } from '../hooks/use-dialog-hotkeys';
 export { SecurityVariablesEnvSuffix } from '../constants/environments';
 export { isUndefined, isString, isNotNull, isObject } from '../utils/type-guards';
 export { ThemeDataContext, type ThemeDataTransferObject } from '../contexts/ThemeDataContext';

package/lib/core/openapi/index.js

@@ -1,12 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ENTITY_RELATION_TYPES = exports.ThemeDataContext = exports.isObject = exports.isNotNull = exports.isString = exports.isUndefined = exports.SecurityVariablesEnvSuffix = exports.useModalScrollLock = exports.useActiveSectionId = exports.useOutsideClick = exports.useThemeHooks = exports.useFocusTrap = exports.isPrimitive = exports.breakpoints = exports.GlobalStyle = exports.useMount = exports.typedMemo = exports.withPathPrefix = exports.addTrailingSlash = exports.combineUrls = exports.getPathPrefix = exports.removeLeadingSlash = exports.addLeadingSlash = exports.IS_BROWSER = void 0;
-// 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.
+exports.ENTITY_RELATION_TYPES = exports.ThemeDataContext = exports.isObject = exports.isNotNull = exports.isString = exports.isUndefined = exports.SecurityVariablesEnvSuffix = exports.useDialogHotKeys = exports.useSearchDialog = exports.useModalScrollLock = exports.useActiveSectionId = exports.useOutsideClick = exports.useThemeHooks = exports.useFocusTrap = exports.getUserAgent = exports.isPrimitive = exports.breakpoints = exports.GlobalStyle = exports.useMount = exports.typedMemo = exports.withPathPrefix = exports.addTrailingSlash = exports.combineUrls = exports.getPathPrefix = exports.removeLeadingSlash = exports.addLeadingSlash = exports.IS_BROWSER = void 0;
 var dom_1 = require("../utils/dom");
 Object.defineProperty(exports, "IS_BROWSER", { enumerable: true, get: function () { return dom_1.IS_BROWSER; } });
 var urls_1 = require("../utils/urls");
@@ -26,6 +20,8 @@ var media_css_1 = require("../utils/media-css");
 Object.defineProperty(exports, "breakpoints", { enumerable: true, get: function () { return media_css_1.breakpoints; } });
 var args_typecheck_1 = require("../utils/args-typecheck");
 Object.defineProperty(exports, "isPrimitive", { enumerable: true, get: function () { return args_typecheck_1.isPrimitive; } });
+var get_user_agent_1 = require("../utils/get-user-agent");
+Object.defineProperty(exports, "getUserAgent", { enumerable: true, get: function () { return get_user_agent_1.getUserAgent; } });
 var use_focus_trap_1 = require("../hooks/use-focus-trap");
 Object.defineProperty(exports, "useFocusTrap", { enumerable: true, get: function () { return use_focus_trap_1.useFocusTrap; } });
 var use_theme_hooks_1 = require("../hooks/use-theme-hooks");
@@ -36,6 +32,10 @@ var use_active_section_id_1 = require("../hooks/use-active-section-id");
 Object.defineProperty(exports, "useActiveSectionId", { enumerable: true, get: function () { return use_active_section_id_1.useActiveSectionId; } });
 var use_modal_scroll_lock_1 = require("../hooks/use-modal-scroll-lock");
 Object.defineProperty(exports, "useModalScrollLock", { enumerable: true, get: function () { return use_modal_scroll_lock_1.useModalScrollLock; } });
+var use_search_dialog_1 = require("../hooks/search/use-search-dialog");
+Object.defineProperty(exports, "useSearchDialog", { enumerable: true, get: function () { return use_search_dialog_1.useSearchDialog; } });
+var use_dialog_hotkeys_1 = require("../hooks/use-dialog-hotkeys");
+Object.defineProperty(exports, "useDialogHotKeys", { enumerable: true, get: function () { return use_dialog_hotkeys_1.useDialogHotKeys; } });
 var environments_1 = require("../constants/environments");
 Object.defineProperty(exports, "SecurityVariablesEnvSuffix", { enumerable: true, get: function () { return environments_1.SecurityVariablesEnvSuffix; } });
 var type_guards_1 = require("../utils/type-guards");

package/lib/core/utils/urls.js

@@ -56,7 +56,7 @@ function addLeadingSlash(url) {
     return url.startsWith('/') ? url : `/${url}`;
 }
 function removeTrailingSlash(url) {
-    return url.endsWith('/') ? url.substring(0, url.length - 1) : url;
+    return url.endsWith('/') && url !== '/' ? url.substring(0, url.length - 1) : url;
 }
 function removeLeadingSlash(url) {
     return url.startsWith('/') ? url.substring(1) : url;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.58.0-next.2",
+  "version": "0.58.0-next.4",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -88,7 +88,7 @@
     "react-calendar": "5.1.0",
     "react-date-picker": "11.0.0",
     "@redocly/realm-asyncapi-sdk": "0.4.0-next.1",
-    "@redocly/config": "0.29.1"
+    "@redocly/config": "0.31.0"
   },
   "scripts": {
     "watch": "tsc -p tsconfig.build.json && (concurrently \"tsc -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",

package/src/components/Catalog/Catalog.tsx

@@ -102,7 +102,9 @@ export function Catalog(props: CatalogProps): JSX.Element {
           <CatalogPageDescription>
             <CatalogTitleWrapper>
               <CatalogTitle data-translation-key={catalogConfig?.titleTranslationKey}>
-                {translate(catalogConfig?.titleTranslationKey)}{' '}
+                {catalogConfig?.titleTranslationKey
+                  ? translate(catalogConfig?.titleTranslationKey)
+                  : catalogConfig?.slug}{' '}
               </CatalogTitle>
               <CounterTag borderless>{entitiesCounter}</CounterTag>
             </CatalogTitleWrapper>

package/src/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityApiDescriptionRelations.tsx

@@ -46,7 +46,7 @@ export function CatalogEntityApiDescriptionRelations({
 }: CatalogEntityApiDescriptionRelationsProps): JSX.Element {
   return (
     <div data-component-name="Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityApiDescriptionRelations">
-      <Tabs forceReady={relations.length > 0} size={TabsSize.MEDIUM}>
+      <Tabs key={entity.id} forceReady={relations.length > 0} size={TabsSize.MEDIUM}>
         <TabItem
           label="Operations"
           icon={<MoleculesIcon />}

package/src/components/Search/SearchDialog.tsx

@@ -306,13 +306,16 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
                     aria-selected="true"
                   >
                     <AiStarsIcon
+                      style={{ flexShrink: 0 }}
                       color="var(--search-ai-icon-color)"
                       size="36px"
                       background="var(--search-ai-icon-bg-color)"
                       margin="0 var(--spacing-md) 0 0"
                       borderRadius="var(--border-radius-lg)"
                     />
-                    <Typography fontWeight="var(--font-weight-semibold)">{query}</Typography>
+                    <QueryWrapper>
+                      <Typography fontWeight="var(--font-weight-semibold)">{query}</Typography>
+                    </QueryWrapper>
                     <Typography>- {translate('search.ai.label', 'Ask AI assistant')}</Typography>
                     <ReturnKeyIcon color="var(--search-item-text-color)" />
                   </SearchWithAI>
@@ -484,10 +487,10 @@ const SearchDialogWrapper = styled.div`
   border-radius: 0;
 
   @media screen and (max-width: ${breakpoints.small}) {
-    min-height: -webkit-fill-available !important;
-    min-height: 100dvh !important;
-    height: auto !important;
-    width: 100vw !important;
+    min-height: -webkit-fill-available;
+    min-height: 100dvh;
+    height: 100dvh;
+    width: 100vw;
   }
 
   @media screen and (min-width: ${breakpoints.small}) {
@@ -539,6 +542,8 @@ const SearchDialogBodyMainView = styled.div`
 
 const SearchDialogBodyFilterView = styled.div`
   overflow: scroll;
+  max-width: var(--search-filter-width);
+  width: 100%;
 `;
 
 const SearchDialogFooter = styled.footer`
@@ -673,3 +678,7 @@ const SearchWithAI = styled.div`
     margin-right: var(--spacing-xs);
   }
 `;
+
+const QueryWrapper = styled.div`
+  word-break: break-word;
+`;

package/src/components/Search/SearchFilter.tsx

@@ -66,7 +66,8 @@ export function SearchFilter({
 }
 
 const SearchFilterWrapper = styled.div`
-  width: var(--search-filter-width);
+  width: 100%;
+  max-width: var(--search-filter-width);
   display: flex;
   flex-direction: column;
   padding: var(--search-filter-padding);

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

@@ -21,7 +21,7 @@ export function useCatalogTableViewRow({
     }
 
     return Object.values(entitiesCatalogConfig.catalogs ?? {}).find((catalog) => {
-      return catalog.includes?.some((include) => include.type === entityType);
+      return catalog?.includes?.some((include) => include.type === entityType);
     });
   };
 

package/src/core/hooks/use-active-section-id.ts

@@ -25,6 +25,12 @@ export function useActiveSectionId(
           setItemId('');
           return;
         }
+
+        if (window.scrollY <= 0) {
+          setItemId(sections[0].getAttribute('data-section-id') || '');
+          return;
+        }
+
         for (let i = 0; i < sections.length; i++) {
           const section = sections[i];
           const rect = section.getBoundingClientRect();

package/src/core/hooks/use-telemetry-fallback.ts

@@ -58,4 +58,9 @@ export const useTelemetryFallback = () => ({
   sendAsyncapiDocsMessageClickedMessage: () => {},
   sendAsyncapiDocsServerModalOpenedMessage: () => {},
   sendAsyncapiDocsDownloadDefinitionClickedMessage: () => {},
+  sendGraphqlDocsViewedMessage: () => {},
+  sendGraphqlDocsPerformanceMetricsMessage: () => {},
+  sendGraphqlDocsReferencedInLinkClickedMessage: () => {},
+  sendGraphqlDocsRequiredScopesModalOpenedMessage: () => {},
+  sendGraphqlDocsDownloadDefinitionClickedMessage: () => {},
 });

package/src/core/openapi/index.ts

@@ -4,6 +4,10 @@
 // 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 type { UserClaims } from '../types/user-claims';
+export type { SearchDocument, SearchItemData, OperationParameter } from '../types/search';
+export type { TFunction, TOptions } from '../types/l10n';
+export type { SelectOption, SelectProps } from '../types/select';
 export { IS_BROWSER } from '../utils/dom';
 export {
   addLeadingSlash,
@@ -18,14 +22,14 @@ 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 { getUserAgent } from '../utils/get-user-agent';
 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 { useSearchDialog } from '../hooks/search/use-search-dialog';
+export { useDialogHotKeys } from '../hooks/use-dialog-hotkeys';
 export { SecurityVariablesEnvSuffix } from '../constants/environments';
 export { isUndefined, isString, isNotNull, isObject } from '../utils/type-guards';
 export { ThemeDataContext, type ThemeDataTransferObject } from '../contexts/ThemeDataContext';

package/src/core/utils/urls.ts

@@ -54,8 +54,9 @@ export function addLeadingSlash(url: string): string {
 }
 
 export function removeTrailingSlash(url: string): string {
-  return url.endsWith('/') ? url.substring(0, url.length - 1) : url;
+  return url.endsWith('/') && url !== '/' ? url.substring(0, url.length - 1) : url;
 }
+
 export function removeLeadingSlash(url: string): string {
   return url.startsWith('/') ? url.substring(1) : url;
 }