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

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/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')),
@@ -439,4 +440,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/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/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.1",
+  "version": "0.58.0-next.3",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -87,8 +87,8 @@
     "openapi-sampler": "1.6.1",
     "react-calendar": "5.1.0",
     "react-date-picker": "11.0.0",
-    "@redocly/config": "0.29.1",
-    "@redocly/realm-asyncapi-sdk": "0.4.0-next.0"
+    "@redocly/config": "0.31.0",
+    "@redocly/realm-asyncapi-sdk": "0.4.0-next.1"
   },
   "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/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>
@@ -673,3 +676,7 @@ const SearchWithAI = styled.div`
     margin-right: var(--spacing-xs);
   }
 `;
+
+const QueryWrapper = styled.div`
+  word-break: break-word;
+`;

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/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;
 }