@redocly/theme 0.50.1 → 0.51.0-next.1

package/lib/components/PageNavigation/NextButton.js

@@ -41,9 +41,8 @@ function NextButton({ nextPage, className }) {
         return React.createElement("div", null, "\u00A0");
     }
     const nextPageText = nextPage.label || nextPage.routeSlug || '';
-    const defaultLabel = ((_b = navigation === null || navigation === void 0 ? void 0 : navigation.nextButton) === null || _b === void 0 ? void 0 : _b.text) || 'Next page';
     const translationKey = 'page.nextButton';
-    const label = translate(translationKey, { defaultValue: defaultLabel });
+    const label = ((_b = navigation === null || navigation === void 0 ? void 0 : navigation.nextButton) === null || _b === void 0 ? void 0 : _b.text) || translate(translationKey, { defaultValue: 'Next page' });
     return (React.createElement(NextButtonWrapper, { "data-component-name": "PageNavigation/NextButton", "data-translation-key": translationKey },
         React.createElement(NextPageLabel, null, label),
         React.createElement(NextPageButton, { size: "large", to: nextPage.link, extraClass: className, variant: "link", icon: React.createElement(ArrowRightIcon_1.ArrowRightIcon, null), iconPosition: "right" }, nextPageText)));

package/lib/components/PageNavigation/PreviousButton.js

@@ -18,9 +18,9 @@ function PreviousButton({ prevPage, className }) {
         return react_1.default.createElement("div", null, "\u00A0");
     }
     const prevPageText = prevPage.label || prevPage.routeSlug || '';
-    const defaultLabel = ((_b = navigation === null || navigation === void 0 ? void 0 : navigation.previousButton) === null || _b === void 0 ? void 0 : _b.text) || 'Previous page';
     const translationKey = 'page.previousButton';
-    const label = translate(translationKey, { defaultValue: defaultLabel });
+    const label = ((_b = navigation === null || navigation === void 0 ? void 0 : navigation.previousButton) === null || _b === void 0 ? void 0 : _b.text) ||
+        translate(translationKey, { defaultValue: 'Previous page' });
     return (react_1.default.createElement(PreviousButtonWrapper, { "data-component-name": "PageNavigation/PreviousButton", "data-translation-key": translationKey },
         react_1.default.createElement(PreviousPageLabel, null, label),
         react_1.default.createElement(PreviousPageButton, { size: "large", to: prevPage.link, extraClass: className, variant: "link", icon: react_1.default.createElement(ArrowLeftIcon_1.ArrowLeftIcon, null), iconPosition: "left" }, prevPageText)));

package/lib/components/Search/SearchDialog.js

@@ -46,8 +46,8 @@ const SpinnerLoader_1 = require("../../components/Loaders/SpinnerLoader");
 const SettingsIcon_1 = require("../../icons/SettingsIcon/SettingsIcon");
 const AiStarsIcon_1 = require("../../icons/AiStarsIcon/AiStarsIcon");
 function SearchDialog({ onClose, className }) {
-    const { useTranslate, useCurrentProduct, useSearch, useProducts, useAiSearch, useTelemetry } = (0, hooks_1.useThemeHooks)();
-    const telemetry = useTelemetry();
+    const { useTranslate, useCurrentProduct, useSearch, useProducts, useAiSearch, useOtelTelemetry } = (0, hooks_1.useThemeHooks)();
+    const otelTelemetry = useOtelTelemetry();
     const products = useProducts();
     const currentProduct = useCurrentProduct();
     const [product, setProduct] = (0, react_1.useState)(currentProduct);
@@ -79,11 +79,11 @@ function SearchDialog({ onClose, className }) {
                 : undefined;
         }
         return (react_1.default.createElement(SearchItem_1.SearchItem, { key: `${index}-${item.document.id}`, item: item, product: itemProduct, onClick: () => {
-                telemetry.send('search_result_clicked', {
+                otelTelemetry.send('search.result.clicked', {
                     query,
                     url: item.document.url,
-                    total_results: results.length,
-                    index,
+                    total_results: results.length.toString(),
+                    index: index.toString(),
                     search_engine: mode,
                 });
             } }));

package/lib/core/hooks/code-walkthrough/use-code-panel.js

@@ -82,9 +82,10 @@ function getCodeLinesFromNode(node, activeStep, areConditionsMet, populateInputs
     }
     else {
         const shouldRenderChunk = areConditionsMet(node.condition);
-        const isHighlighted = activeStep != null &&
-            node.condition.steps.length > 0 &&
-            node.condition.steps.includes(activeStep);
+        const isHighlighted = parentHighlighted ||
+            (activeStep != null &&
+                node.condition.steps.length > 0 &&
+                node.condition.steps.includes(activeStep));
         return shouldRenderChunk
             ? node.children.flatMap((child) => getCodeLinesFromNode(child, activeStep, areConditionsMet, populateInputsWithValue, isHighlighted))
             : [];

package/lib/core/hooks/code-walkthrough/use-code-walkthrough-controls.js

@@ -75,6 +75,11 @@ function useCodeWalkthroughControls(filters, inputs, toggles, enableDeepLink) {
     };
     const walkthroughContext = (0, react_1.useMemo)(() => {
         const areConditionsMet = (conditions) => (0, utils_1.matchCodeWalkthroughConditions)(conditions, controlsState);
+        // reset controls
+        for (const control of Object.values(controlsState)) {
+            control.render = true;
+            control.value = control.value || defaultControlsValues[control.type];
+        }
         for (const [id, control] of Object.entries(controlsState)) {
             if (control && !areConditionsMet(control)) {
                 controlsState[id].render = false;

package/lib/core/hooks/use-theme-hooks.js

@@ -9,6 +9,7 @@ const fallbacks = {
     }),
     useSubmitFeedback: () => ({ submitFeedback: () => { } }),
     useTelemetry: () => ({ telemetry: () => { } }),
+    useOtelTelemetry: () => ({ send: () => { } }),
     useBreadcrumbs: () => [],
     useCodeHighlight: () => ({ highlight: (rawContent) => rawContent }),
     useUserMenu: () => ({}),

package/lib/core/types/hooks.d.ts

@@ -100,6 +100,9 @@ export type ThemeHooks = {
     useTelemetry: () => {
         send(action: TelemetryEvent, data: unknown): void;
     };
+    useOtelTelemetry: () => {
+        send(action: OtelTelemetryEvent, data: unknown): void;
+    };
     useUserTeams: () => string[];
     usePageProps: <T extends Record<string, unknown>>() => PageProps & T;
     useCodeHighlight: () => {
@@ -123,5 +126,6 @@ export type L10nConfig = {
         name: string;
     }[];
 };
-type TelemetryEvent = 'search_opened' | 'client_error_caught' | 'breadcrumb_clicked' | 'color_mode_switched' | 'sidebar_item_clicked' | 'sidebar_item_expanded' | 'sidebar_item_collapsed' | 'edit_page_link_clicked' | 'code_snippet_copied' | 'code_snippet_reported' | 'feedback_sent' | 'navbar_menu_item_clicked' | 'login_button_clicked' | 'login_provider_button_clicked' | 'logout_menu_item_clicked' | 'logo_clicked' | 'toc_item_clicked' | 'version_switched' | 'catalog_filter_changed' | 'catalog_item_clicked' | 'scorecard_link_clicked' | 'markdown_anchor_link_clicked' | 'back_to_catalog_button_clicked' | 'sidebar_drilldown_back_button_clicked' | 'footer_item_clicked' | 'request_api_access_button_clicked' | 'sidebar_samples_button_clicked' | 'change_layout_button_clicked' | 'version_picker_selection_change' | 'openapi_docs' | 'replay' | 'catalog_actions_button_clicked' | 'catalog_item_clicked' | 'filter_checkbox_toggled' | 'language_picker_locale_changed' | 'mobile_menu_button_close_clicked' | 'mobile_menu_button_open_clicked' | 'search_input_reset_button_clicked' | 'search_recent_remove_button_clicked' | 'product_picked' | 'search_result_clicked';
+type TelemetryEvent = 'search_opened' | 'client_error_caught' | 'breadcrumb_clicked' | 'color_mode_switched' | 'sidebar_item_clicked' | 'sidebar_item_expanded' | 'sidebar_item_collapsed' | 'edit_page_link_clicked' | 'code_snippet_copied' | 'code_snippet_reported' | 'feedback_sent' | 'navbar_menu_item_clicked' | 'login_button_clicked' | 'login_provider_button_clicked' | 'logout_menu_item_clicked' | 'logo_clicked' | 'toc_item_clicked' | 'version_switched' | 'catalog_filter_changed' | 'catalog_item_clicked' | 'scorecard_link_clicked' | 'markdown_anchor_link_clicked' | 'back_to_catalog_button_clicked' | 'sidebar_drilldown_back_button_clicked' | 'footer_item_clicked' | 'request_api_access_button_clicked' | 'sidebar_samples_button_clicked' | 'change_layout_button_clicked' | 'version_picker_selection_change' | 'openapi_docs' | 'replay' | 'catalog_actions_button_clicked' | 'catalog_item_clicked' | 'filter_checkbox_toggled' | 'language_picker_locale_changed' | 'mobile_menu_button_close_clicked' | 'mobile_menu_button_open_clicked' | 'search_input_reset_button_clicked' | 'search_recent_remove_button_clicked' | 'product_picked';
+type OtelTelemetryEvent = 'page.viewed' | 'error' | 'search.ai.query' | 'search.query' | 'search.result.clicked';
 export {};

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

@@ -10,4 +10,3 @@ export * from '../../core/types/select';
 export * from '../../core/types/sidebar';
 export * from '../../core/types/filter';
 export * from '../../core/types/user-menu';
-export * from '../../core/types/api-functions';

package/lib/core/types/index.js

@@ -26,5 +26,4 @@ __exportStar(require("../../core/types/select"), exports);
 __exportStar(require("../../core/types/sidebar"), exports);
 __exportStar(require("../../core/types/filter"), exports);
 __exportStar(require("../../core/types/user-menu"), exports);
-__exportStar(require("../../core/types/api-functions"), exports);
 //# sourceMappingURL=index.js.map

package/lib/markdoc/components/CodeWalkthrough/CodePanelHeader.js

@@ -61,7 +61,7 @@ function CodePanelHeader({ files, handleTabSwitch, activeTabName, onDownloadCode
                 if (!tab)
                     continue;
                 const { left: tabLeft, right: tabRight } = tab.getBoundingClientRect();
-                const visible = tabLeft > wrapperLeft && tabRight < wrapperRight;
+                const visible = tabLeft >= wrapperLeft && tabRight <= wrapperRight;
                 if (!visible) {
                     hidden.push(renderableFiles[i]);
                 }

package/lib/markdoc/components/CodeWalkthrough/CodeStep.js

@@ -53,7 +53,8 @@ function CodeStep({ id, heading, stepKey, when, unless, children, }) {
         // If the step is active during first render, scroll to it
         // This is to ensure that the step is visible when the page is loaded
         if (isActive) {
-            handleActivateStep();
+            // Ensure scrollMarginTop calculated before step being scrolled.
+            setTimeout(handleActivateStep, 5);
         }
         // Ignore dependency array because we only need to run this once
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -84,7 +85,7 @@ function CodeStep({ id, heading, stepKey, when, unless, children, }) {
         }
         return null;
     }
-    return (react_1.default.createElement(exports.StepWrapper, { "data-component-name": "Markdoc/CodeWalkthrough/CodeStep", ref: compRef, isActive: isActive, scrollMarginTop: scrollMarginTop, "data-step-key": stepKey, "data-step-active": isActive, onClick: handleActivateStep, onFocus: handleActivateStep, tabIndex: 0 },
+    return (react_1.default.createElement(exports.StepWrapper, { "data-component-name": "Markdoc/CodeWalkthrough/CodeStep", ref: compRef, isActive: isActive, scrollMarginTop: scrollMarginTop, "data-step-key": stepKey, "data-step-active": isActive, onClick: handleActivateStep, onFocus: handleActivateStep, tabIndex: 0, className: "code-step-wrapper" },
         react_1.default.createElement(StepContent, { isActive: isActive },
             heading ? react_1.default.createElement(StepHeading, null, heading) : null,
             children)));

package/lib/markdoc/components/CodeWalkthrough/CodeWalkthrough.js

@@ -44,7 +44,6 @@ const contexts_1 = require("../../../core/contexts");
 const CodePanel_1 = require("../../../markdoc/components/CodeWalkthrough/CodePanel");
 const hooks_1 = require("../../../core/hooks");
 const CodeFilters_1 = require("../../../markdoc/components/CodeWalkthrough/CodeFilters");
-const CodeStep_1 = require("../../../markdoc/components/CodeWalkthrough/CodeStep");
 function CodeWalkthrough(_a) {
     var { children, steps, preview } = _a, attributes = __rest(_a, ["children", "steps", "preview"]);
     // Steps are being modified causing the observer to be recreated in the useCodeWalkthrough hook
@@ -95,7 +94,7 @@ const ContentWrapper = styled_components_1.default.div `
   min-height: 0;
   max-width: var(--md-content-max-width);
 
-  & > *:not(${CodeStep_1.StepWrapper}) {
+  & > *:not(.code-step-wrapper) {
     padding-left: var(--spacing-xl);
   }
   overflow-y: scroll;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.50.1",
+  "version": "0.51.0-next.1",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -59,8 +59,6 @@
     "jest-styled-components": "7.2.0",
     "jest-when": "3.6.0",
     "json-schema-to-ts": "2.7.2",
-    "lodash.debounce": "4.0.8",
-    "lodash.throttle": "4.1.1",
     "npm-run-all2": "5.0.2",
     "react-refresh": "0.14.2",
     "react-router-dom": "6.21.1",
@@ -82,6 +80,8 @@
     "highlight-words-core": "1.2.2",
     "hotkeys-js": "3.10.1",
     "jszip": "3.10.1",
+    "lodash.debounce": "4.0.8",
+    "lodash.throttle": "4.1.1",
     "react-calendar": "4.2.1",
     "react-date-picker": "10.0.3",
     "timeago.js": "4.0.2",

package/src/components/PageNavigation/NextButton.tsx

@@ -22,9 +22,9 @@ export function NextButton({ nextPage, className }: NextPageType): JSX.Element {
   }
 
   const nextPageText = nextPage.label || nextPage.routeSlug || '';
-  const defaultLabel = navigation?.nextButton?.text || 'Next page';
   const translationKey = 'page.nextButton';
-  const label = translate(translationKey, { defaultValue: defaultLabel });
+  const label =
+    navigation?.nextButton?.text || translate(translationKey, { defaultValue: 'Next page' });
 
   return (
     <NextButtonWrapper

package/src/components/PageNavigation/PreviousButton.tsx

@@ -22,9 +22,10 @@ export function PreviousButton({ prevPage, className }: PreviousPageType): JSX.E
   }
 
   const prevPageText = prevPage.label || prevPage.routeSlug || '';
-  const defaultLabel = navigation?.previousButton?.text || 'Previous page';
   const translationKey = 'page.previousButton';
-  const label = translate(translationKey, { defaultValue: defaultLabel });
+  const label =
+    navigation?.previousButton?.text ||
+    translate(translationKey, { defaultValue: 'Previous page' });
 
   return (
     <PreviousButtonWrapper

package/src/components/Search/SearchDialog.tsx

@@ -27,9 +27,9 @@ export type SearchDialogProps = {
 };
 
 export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Element {
-  const { useTranslate, useCurrentProduct, useSearch, useProducts, useAiSearch, useTelemetry } =
+  const { useTranslate, useCurrentProduct, useSearch, useProducts, useAiSearch, useOtelTelemetry } =
     useThemeHooks();
-  const telemetry = useTelemetry();
+  const otelTelemetry = useOtelTelemetry();
   const products = useProducts();
   const currentProduct = useCurrentProduct();
   const [product, setProduct] = useState(currentProduct);
@@ -88,11 +88,11 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
         item={item}
         product={itemProduct}
         onClick={() => {
-          telemetry.send('search_result_clicked', {
+          otelTelemetry.send('search.result.clicked', {
             query,
             url: item.document.url,
-            total_results: results.length,
-            index,
+            total_results: results.length.toString(),
+            index: index.toString(),
             search_engine: mode,
           });
         }}

package/src/core/hooks/code-walkthrough/use-code-panel.ts

@@ -145,9 +145,10 @@ function getCodeLinesFromNode(
     const shouldRenderChunk = areConditionsMet(node.condition);
 
     const isHighlighted =
-      activeStep != null &&
-      node.condition.steps.length > 0 &&
-      node.condition.steps.includes(activeStep);
+      parentHighlighted ||
+      (activeStep != null &&
+        node.condition.steps.length > 0 &&
+        node.condition.steps.includes(activeStep));
 
     return shouldRenderChunk
       ? node.children.flatMap((child) =>

package/src/core/hooks/code-walkthrough/use-code-walkthrough-controls.ts

@@ -155,6 +155,11 @@ export function useCodeWalkthroughControls(
   const walkthroughContext = useMemo(() => {
     const areConditionsMet = (conditions: CodeWalkthroughConditionsObject) =>
       matchCodeWalkthroughConditions(conditions, controlsState);
+    // reset controls
+    for (const control of Object.values(controlsState)) {
+      control.render = true;
+      control.value = control.value || defaultControlsValues[control.type];
+    }
 
     for (const [id, control] of Object.entries(controlsState)) {
       if (control && !areConditionsMet(control)) {

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

@@ -11,6 +11,7 @@ const fallbacks = {
   }),
   useSubmitFeedback: () => ({ submitFeedback: () => {} }),
   useTelemetry: () => ({ telemetry: () => {} }),
+  useOtelTelemetry: () => ({ send: () => {} }),
   useBreadcrumbs: () => [],
   useCodeHighlight: () => ({ highlight: (rawContent: string) => rawContent }),
   useUserMenu: () => ({}),

package/src/core/types/hooks.ts

@@ -112,6 +112,7 @@ export type ThemeHooks = {
     | undefined;
   useCatalog: (config: CatalogConfig) => FilteredCatalog;
   useTelemetry: () => { send(action: TelemetryEvent, data: unknown): void };
+  useOtelTelemetry: () => { send(action: OtelTelemetryEvent, data: unknown): void };
   useUserTeams: () => string[];
   usePageProps: <T extends Record<string, unknown>>() => PageProps & T;
   useCodeHighlight: () => {
@@ -175,5 +176,11 @@ type TelemetryEvent =
   | 'mobile_menu_button_open_clicked'
   | 'search_input_reset_button_clicked'
   | 'search_recent_remove_button_clicked'
-  | 'product_picked'
-  | 'search_result_clicked';
+  | 'product_picked';
+
+type OtelTelemetryEvent =
+  | 'page.viewed'
+  | 'error'
+  | 'search.ai.query'
+  | 'search.query'
+  | 'search.result.clicked';

package/src/core/types/index.ts

@@ -10,4 +10,3 @@ 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/api-functions';

package/src/markdoc/components/CodeWalkthrough/CodePanelHeader.tsx

@@ -57,7 +57,7 @@ export function CodePanelHeader({
         if (!tab) continue;
 
         const { left: tabLeft, right: tabRight } = tab.getBoundingClientRect();
-        const visible = tabLeft > wrapperLeft && tabRight < wrapperRight;
+        const visible = tabLeft >= wrapperLeft && tabRight <= wrapperRight;
 
         if (!visible) {
           hidden.push(renderableFiles[i]);

package/src/markdoc/components/CodeWalkthrough/CodeStep.tsx

@@ -49,7 +49,8 @@ export function CodeStep({
     // If the step is active during first render, scroll to it
     // This is to ensure that the step is visible when the page is loaded
     if (isActive) {
-      handleActivateStep();
+      // Ensure scrollMarginTop calculated before step being scrolled.
+      setTimeout(handleActivateStep, 5);
     }
 
     // Ignore dependency array because we only need to run this once
@@ -97,6 +98,7 @@ export function CodeStep({
       onClick={handleActivateStep}
       onFocus={handleActivateStep}
       tabIndex={0}
+      className="code-step-wrapper"
     >
       <StepContent isActive={isActive}>
         {heading ? <StepHeading>{heading}</StepHeading> : null}

package/src/markdoc/components/CodeWalkthrough/CodeWalkthrough.tsx

@@ -13,7 +13,6 @@ import {
   CodeFilters,
   GetFilterState,
 } from '@redocly/theme/markdoc/components/CodeWalkthrough/CodeFilters';
-import { StepWrapper } from '@redocly/theme/markdoc/components/CodeWalkthrough/CodeStep';
 
 export type CodeWalkthroughProps = PropsWithChildren<CodeWalkthroughAttr>;
 
@@ -92,7 +91,7 @@ const ContentWrapper = styled.div`
   min-height: 0;
   max-width: var(--md-content-max-width);
 
-  & > *:not(${StepWrapper}) {
+  & > *:not(.code-step-wrapper) {
     padding-left: var(--spacing-xl);
   }
   overflow-y: scroll;

package/lib/core/types/api-functions.d.ts

@@ -1,5 +0,0 @@
-export type { ApiFunctionsRequest as Request } from '@redocly/config';
-export type { ApiFunctionsResponse as Response } from '@redocly/config';
-export type { ApiFunctionsContext as Context } from '@redocly/config';
-export type { PropsContext } from '@redocly/config';
-export type { PageStaticData as PropsData } from '@redocly/config';

package/lib/core/types/api-functions.js

@@ -1,3 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=api-functions.js.map

package/src/core/types/api-functions.ts

@@ -1,5 +0,0 @@
-export type { ApiFunctionsRequest as Request } from '@redocly/config';
-export type { ApiFunctionsResponse as Response } from '@redocly/config';
-export type { ApiFunctionsContext as Context } from '@redocly/config';
-export type { PropsContext } from '@redocly/config';
-export type { PageStaticData as PropsData } from '@redocly/config';