@redocly/theme 0.60.0-next.6 → 0.60.0-next.8

package/src/core/hooks/search/use-search-dialog.ts

@@ -4,6 +4,7 @@ import hotkeys from 'hotkeys-js';
 
 import { useThemeHooks } from '../use-theme-hooks';
 import { useThemeConfig } from '../use-theme-config';
+import { useSearchSession } from '../../contexts';
 
 export function useSearchDialog() {
   const [isOpen, setIsOpen] = useState(false);
@@ -11,6 +12,7 @@ export function useSearchDialog() {
   const location = useLocation();
   const { useTelemetry } = useThemeHooks();
   const telemetry = useTelemetry();
+  const { refreshSearchSessionId } = useSearchSession();
   const keyShortcuts = themeSettings?.search?.shortcuts ?? ['⌘+K,CTRL+K'];
   const hotKeys = keyShortcuts?.join(',');
 
@@ -34,8 +36,9 @@ export function useSearchDialog() {
   }, []);
 
   const onClose = useCallback(() => {
+    refreshSearchSessionId();
     setIsOpen(false);
-  }, []);
+  }, [refreshSearchSessionId]);
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(onClose, [location]);

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

@@ -54,6 +54,8 @@ export const useTelemetryFallback = () => ({
   sendSwitchServersClickedMessage: () => {},
   sendExamplesSwitcherClickedMessage: () => {},
   sendTryItOpenedMessage: () => {},
+  sendViewSecurityDetailsClickedMessage: () => {},
+  sendViewSecurityDetailsClosedMessage: () => {},
   sendAsyncapiDocsViewedMessage: () => {},
   sendAsyncapiDocsPerformanceMetricsMessage: () => {},
   sendAsyncapiDocsSwitchMessageClickedMessage: () => {},

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

@@ -17,6 +17,7 @@ const fallbacks = {
    **/
   useOtelTelemetry: () => ({ send: () => {} }),
   useBreadcrumbs: () => ({ breadcrumbs: [], siblings: undefined }),
+  useBanner: () => ({ banner: undefined, dismissBanner: () => {} }),
   useCodeHighlight: () => ({ highlight: (rawContent: string) => rawContent }),
   useUserMenu: () => ({}),
   usePageData: () => null,

package/src/core/openapi/index.ts

@@ -37,3 +37,4 @@ 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';
+export { SearchSessionProvider, SearchSessionContext } from '../contexts/SearchContext';

package/src/core/styles/dark.ts

@@ -14,6 +14,7 @@ import { cardsDarkMode } from '@redocly/theme/markdoc/components/Cards/variables
 import { catalogDarkMode } from '@redocly/theme/components/Catalog/variables.dark';
 import { pageActionsDarkMode } from '@redocly/theme/components/PageActions/variables.dark';
 import { tooltipDarkMode } from '@redocly/theme/components/Tooltip/variables.dark';
+import { bannerDarkMode } from '@redocly/theme/components/Banner/variables.dark';
 
 const replayDarkMode = css`
   /**
@@ -328,6 +329,7 @@ export const darkMode = css`
   ${catalogDarkMode}
   ${pageActionsDarkMode}
   ${tooltipDarkMode}
+  ${bannerDarkMode}
 
   /**
     * @tokens Dark Theme Scrollbar Config

package/src/core/styles/global.ts

@@ -26,6 +26,7 @@ import { menu, mobileMenu } from '@redocly/theme/components/Menu/variables';
 import { code } from '@redocly/theme/components/CodeBlock/variables';
 import { productPicker } from '@redocly/theme/components/Product/variables';
 import { markdown } from '@redocly/theme/components/Markdown/variables';
+import { banner } from '@redocly/theme/components/Banner/variables';
 import { markdownTabs } from '@redocly/theme/markdoc/components/Tabs/variables';
 import { mermaid } from '@redocly/theme/markdoc/components/Mermaid/variables';
 import { lastUpdated } from '@redocly/theme/components/LastUpdated/variables';
@@ -1239,6 +1240,7 @@ export const styles = css`
     ${apiReferenceDocs}
     ${apiReferencePanels}
     ${badges}
+    ${banner}
     ${borders}
     ${breadcrumbs}
     ${button}

package/src/core/types/hooks.ts

@@ -1,5 +1,6 @@
 import type { AsyncApiRealmUI } from '@redocly/realm-asyncapi-sdk';
 import type {
+  BannerConfig,
   CatalogEntityConfig,
   PageData,
   PageProps,
@@ -83,10 +84,13 @@ export type ThemeHooks = {
     breadcrumbs: BreadcrumbItem[];
     currentItemSiblings?: BreadcrumbItem[];
   };
+  useBanner: () => {
+    banner: BannerConfig | undefined;
+    dismissBanner: (content: string) => void;
+  };
   useSearch: (
     product?: string,
     autoSearchDisabled?: boolean,
-    searchSessionId?: string,
   ) => {
     query: string;
     setQuery: React.Dispatch<React.SetStateAction<string>>;
@@ -108,10 +112,7 @@ export type ThemeHooks = {
     advancedSearch?: boolean;
     askAi?: boolean;
   };
-  useAiSearch: (
-    options?: { filter?: SearchFilterItem[] },
-    searchSessionId?: string,
-  ) => {
+  useAiSearch: (options?: { filter?: SearchFilterItem[] }) => {
     askQuestion: (question: string, history?: AiSearchConversationItem[]) => void;
     isGeneratingResponse: boolean;
     question: string;

package/src/index.ts

@@ -52,6 +52,8 @@ export * from '@redocly/theme/components/Footer/Footer';
 export * from '@redocly/theme/components/Footer/FooterColumn';
 export * from '@redocly/theme/components/Footer/FooterCopyright';
 export * from '@redocly/theme/components/Footer/FooterItem';
+/* Banner */
+export * from '@redocly/theme/components/Banner/Banner';
 /* Typography */
 export * from '@redocly/theme/components/Typography/CompactTypography';
 export * from '@redocly/theme/components/Typography/Emphasis';