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

package/lib/core/utils/js-utils.d.ts

@@ -36,3 +36,21 @@ export declare function getAdjacentValues<T>(array: T[], index: number): {
     prev: T | null;
     next: T | null;
 };
+/**
+ * Inserts an element at a given index in an array. Returns a new array with the element inserted.
+ *
+ * @example
+ * const array = [10, 20, 30, 40];
+ * insertAt(array, 2, 25);
+ * // returns: [10, 20, 25, 30, 40]
+ */
+export declare function insertAt<T>(array: T[], index: number, newElement: T): T[];
+/**
+ * Removes an element from an array. Returns a new array with the element removed.
+ *
+ * @example
+ * const array = [10, 20, 30, 40];
+ * removeElement(array, 20);
+ * // returns: [10, 30, 40]
+ */
+export declare function removeElement<T>(array: T[], item: T): T[];

package/lib/core/utils/js-utils.js

@@ -5,6 +5,8 @@ exports.toStringIfDefined = toStringIfDefined;
 exports.isBrowser = isBrowser;
 exports.isPlainObject = isPlainObject;
 exports.getAdjacentValues = getAdjacentValues;
+exports.insertAt = insertAt;
+exports.removeElement = removeElement;
 function findDeepFirst(list, cb) {
     for (const item of list) {
         if (cb(item) === true) {
@@ -65,4 +67,33 @@ function getAdjacentValues(array, index) {
     const nextValue = index < array.length - 1 ? array[index + 1] : null;
     return { prev: prevValue, next: nextValue };
 }
+/**
+ * Inserts an element at a given index in an array. Returns a new array with the element inserted.
+ *
+ * @example
+ * const array = [10, 20, 30, 40];
+ * insertAt(array, 2, 25);
+ * // returns: [10, 20, 25, 30, 40]
+ */
+function insertAt(array, index, newElement) {
+    const result = array.concat();
+    result.splice(index, 0, newElement);
+    return result;
+}
+/**
+ * Removes an element from an array. Returns a new array with the element removed.
+ *
+ * @example
+ * const array = [10, 20, 30, 40];
+ * removeElement(array, 20);
+ * // returns: [10, 30, 40]
+ */
+function removeElement(array, item) {
+    const index = array.indexOf(item);
+    if (index === -1)
+        return array;
+    const result = array.slice();
+    result.splice(index, 1);
+    return result;
+}
 //# sourceMappingURL=js-utils.js.map

package/lib/index.d.ts

@@ -21,6 +21,7 @@ export * from './components/Tooltip/Tooltip';
 export * from './components/Tags/HttpTag';
 export * from './components/Tags/CounterTag';
 export * from './components/VersionPicker/VersionPicker';
+export * from './components/Marker/Marker';
 export * from './components/Buttons/CopyButton';
 export * from './components/Buttons/EditPageButton';
 export * from './components/Buttons/EmailButton';

package/lib/index.js

@@ -51,6 +51,7 @@ __exportStar(require("./components/Tooltip/Tooltip"), exports);
 __exportStar(require("./components/Tags/HttpTag"), exports);
 __exportStar(require("./components/Tags/CounterTag"), exports);
 __exportStar(require("./components/VersionPicker/VersionPicker"), exports);
+__exportStar(require("./components/Marker/Marker"), exports);
 /* Buttons */
 __exportStar(require("./components/Buttons/CopyButton"), exports);
 __exportStar(require("./components/Buttons/EditPageButton"), exports);

package/lib/markdoc/components/CodeWalkthrough/CodeStep.d.ts

@@ -2,10 +2,9 @@ import React, { type PropsWithChildren } from 'react';
 import type { WithConditions } from '@redocly/config';
 export type CodeStepProps = WithConditions<{
     id: string;
-    stepKey: number;
     heading?: string;
 }>;
-export declare function CodeStep({ id, heading, stepKey, when, unless, children, }: PropsWithChildren<CodeStepProps>): React.JSX.Element | null;
+export declare function CodeStep({ id, heading, when, unless, children, }: PropsWithChildren<CodeStepProps>): React.JSX.Element | null;
 export declare const StepWrapper: import("styled-components").StyledComponent<"div", any, {
     isActive: boolean;
     scrollMarginTop: number;

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

@@ -30,25 +30,31 @@ exports.StepWrapper = void 0;
 exports.CodeStep = CodeStep;
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
+const Marker_1 = require("../../../components/Marker/Marker");
 const contexts_1 = require("../../../core/contexts");
-function CodeStep({ id, heading, stepKey, when, unless, children, }) {
+function CodeStep({ id, heading, when, unless, children, }) {
     const compRef = (0, react_1.useRef)(null);
+    const markerRef = (0, react_1.useRef)(null);
     const { areConditionsMet } = (0, react_1.useContext)(contexts_1.CodeWalkthroughControlsStateContext);
-    const { activeStep, setActiveStep, register, unregister, lockObserver, filtersElementRef } = (0, react_1.useContext)(contexts_1.CodeWalkthroughStepsContext);
+    const { activeStep, setActiveStep, markers, registerStep, removeStep, registerMarker, removeMarker, lockObserver, filtersElementRef, } = (0, react_1.useContext)(contexts_1.CodeWalkthroughStepsContext);
     const isActive = activeStep === id;
     const [scrollMarginTop, setScrollMarginTop] = (0, react_1.useState)(0);
-    const handleActivateStep = () => {
+    const marker = (0, react_1.useMemo)(() => markers[id], [markers, id]);
+    const isVisible = (0, react_1.useMemo)(() => areConditionsMet({ when, unless }), [areConditionsMet, when, unless]);
+    const handleActivateStep = (0, react_1.useCallback)(() => {
         if (lockObserver) {
             lockObserver.current = true;
-            if (compRef.current) {
-                compRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
+            if (markerRef.current) {
+                markerRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
             }
             setActiveStep(id);
             setTimeout(() => {
                 lockObserver.current = false;
             }, 1000);
         }
-    };
+    }, [setActiveStep, lockObserver, id]);
+    const handleRegisterMarker = (0, react_1.useCallback)((element) => registerMarker(id, element), [registerMarker, id]);
+    const handleRemoveMarker = (0, react_1.useCallback)((element) => removeMarker(id, element), [removeMarker, id]);
     (0, react_1.useEffect)(() => {
         // 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
@@ -62,33 +68,33 @@ function CodeStep({ id, heading, stepKey, when, unless, children, }) {
     (0, react_1.useEffect)(() => {
         var _a, _b;
         const currentCompRef = compRef.current;
-        if (currentCompRef) {
+        if (currentCompRef && isVisible) {
             currentCompRef
                 .querySelectorAll('a, button, input, textarea, select, [tabindex]')
                 .forEach((el) => {
                 el.setAttribute('tabindex', '-1');
             });
-            register(currentCompRef);
+            registerStep(id, currentCompRef);
         }
         const filtersElementHeight = ((_a = filtersElementRef === null || filtersElementRef === void 0 ? void 0 : filtersElementRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight) || 0;
         const navbarHeight = ((_b = document.querySelector('nav')) === null || _b === void 0 ? void 0 : _b.clientHeight) || 0;
         setScrollMarginTop(filtersElementHeight + navbarHeight + 10);
         return () => {
-            if (currentCompRef) {
-                unregister(currentCompRef);
-            }
+            removeStep(id);
         };
-    }, [activeStep, register, unregister, filtersElementRef]);
-    if (!areConditionsMet({ when, unless })) {
-        if (isActive) {
-            setActiveStep(null);
-        }
+    }, [filtersElementRef, registerStep, removeStep, id, isVisible]);
+    if (!isVisible) {
         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, className: "code-step-wrapper" },
-        react_1.default.createElement(StepContent, { isActive: isActive },
-            heading ? react_1.default.createElement(StepHeading, null, heading) : null,
-            children)));
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        marker && (react_1.default.createElement(Marker_1.Marker, { ref: markerRef, marker: marker, registerMarker: handleRegisterMarker, removeMarker: handleRemoveMarker, dataAttribures: {
+                'data-step-id': id,
+                'data-step-active': isActive,
+            } })),
+        react_1.default.createElement(exports.StepWrapper, { "data-component-name": "Markdoc/CodeWalkthrough/CodeStep", ref: compRef, isActive: isActive, scrollMarginTop: scrollMarginTop, 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))));
 }
 const StepContent = styled_components_1.default.div `
   margin: var(--spacing-xs) 0px var(--spacing-xs) calc(var(--spacing-unit) * 3.5);

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

@@ -1,4 +1,27 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -15,7 +38,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CodeWalkthrough = CodeWalkthrough;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const contexts_1 = require("../../../core/contexts");
 const CodePanel_1 = require("../../../markdoc/components/CodeWalkthrough/CodePanel");
@@ -23,18 +46,24 @@ const hooks_1 = require("../../../core/hooks");
 const CodeFilters_1 = require("../../../markdoc/components/CodeWalkthrough/CodeFilters");
 function CodeWalkthrough(_a) {
     var { children, steps, preview } = _a, attributes = __rest(_a, ["children", "steps", "preview"]);
-    const { controlsState, stepsState, files, downloadAssociatedFiles } = (0, hooks_1.useCodeWalkthrough)(steps, attributes);
+    const root = (0, react_1.useRef)(null);
+    const { controlsState, stepsState, files, downloadAssociatedFiles } = (0, hooks_1.useCodeWalkthrough)({
+        steps,
+        attributes,
+        root,
+    });
     const { activeFilters, getControlState, changeControlState } = controlsState;
     const { filtersElementRef } = stepsState;
     return (react_1.default.createElement(contexts_1.CodeWalkthroughStepsContext.Provider, { value: stepsState },
         react_1.default.createElement(contexts_1.CodeWalkthroughControlsStateContext.Provider, { value: controlsState },
-            react_1.default.createElement(CodeWalkthroughWrapper, { className: "code-walkthrough", "data-component-name": "Markdoc/CodeWalkthrough/CodeWalkthrough" },
+            react_1.default.createElement(CodeWalkthroughWrapper, { ref: root, className: "code-walkthrough", "data-component-name": "Markdoc/CodeWalkthrough/CodeWalkthrough" },
                 react_1.default.createElement(DocsPanel, null,
                     react_1.default.createElement(CodeFilters_1.CodeFilters, { filters: activeFilters, getFilterState: getControlState, handleFilterSelect: changeControlState, filtersElementRef: filtersElementRef }),
                     react_1.default.createElement(ContentWrapper, null, children)),
                 react_1.default.createElement(CodePanel_1.CodePanel, { files: files, downloadAssociatedFiles: downloadAssociatedFiles, preview: preview })))));
 }
 const CodeWalkthroughWrapper = styled_components_1.default.div `
+  position: relative;
   display: grid;
   grid-template-columns: 4fr 6fr;
 

package/lib/markdoc/tags/code-step.js

@@ -18,9 +18,6 @@ exports.codeStep = {
             unless: {
                 type: Object,
             },
-            stepKey: {
-                type: Number, // internal
-            },
         },
         render: 'CodeStep',
     },

package/lib/markdoc/tags/code-walkthrough.js

@@ -149,7 +149,6 @@ exports.codeWalkthrough = {
 function collectStepsFromChildren(children, idx = 0) {
     return children.flatMap((child) => {
         if (child instanceof markdoc_1.default.Tag && child.name === 'CodeStep') {
-            child.attributes.stepKey = idx++;
             return [child];
         }
         if (child instanceof markdoc_1.default.Tag) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.55.0-next.1",
+  "version": "0.55.0-next.3",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",

package/src/components/JsonViewer/JsonViewer.tsx

@@ -8,6 +8,8 @@ import { CodeBlock } from '@redocly/theme/components/CodeBlock/CodeBlock';
 
 import { JsonValue } from './helpers';
 
+export type PanelType = 'request' | 'responses' | 'request-samples' | 'response-samples';
+
 export type JsonProps = {
   title?: CodeBlockControlsProps['title'];
   data: any;
@@ -16,6 +18,7 @@ export type JsonProps = {
   startLineNumber?: number;
   hideHeader?: boolean;
   onCopyClick?: () => void;
+  onPanelToggle?: (isExpanded: boolean, panelType?: PanelType) => void;
 };
 
 function JsonComponent({
@@ -23,6 +26,7 @@ function JsonComponent({
   expandLevel = 1,
   className,
   onCopyClick,
+  onPanelToggle,
   title,
   hideHeader,
 }: JsonProps): JSX.Element {
@@ -33,6 +37,7 @@ function JsonComponent({
 
   const expandAll = () => {
     setExpandAllSignal(true);
+    onPanelToggle?.(true);
     setTimeout(() => {
       setExpandAllSignal(undefined);
     });
@@ -40,6 +45,7 @@ function JsonComponent({
 
   const collapseAll = () => {
     setExpandAllSignal(false);
+    onPanelToggle?.(false);
     setTimeout(() => {
       setExpandAllSignal(undefined);
     });

package/src/components/Marker/Marker.tsx

@@ -0,0 +1,53 @@
+import React, { useEffect, useRef, forwardRef, useLayoutEffect } from 'react';
+import styled from 'styled-components';
+
+import type { MarkerArea } from '@redocly/theme/core/types';
+
+type MarkerProps = {
+  marker: MarkerArea;
+  registerMarker: (element: HTMLElement) => void;
+  removeMarker: (element: HTMLElement) => void;
+  dataAttribures?: Record<string, string | boolean | number>;
+};
+
+export const Marker = forwardRef<HTMLDivElement, MarkerProps>(
+  ({ marker, dataAttribures, registerMarker, removeMarker }, forwardedRef) => {
+    const internalRef = useRef<HTMLDivElement | null>(null);
+
+    // Reference should be available before paint
+    useLayoutEffect(() => {
+      if (!forwardedRef) return;
+      if (typeof forwardedRef === 'function') {
+        forwardedRef(internalRef.current);
+      } else {
+        forwardedRef.current = internalRef.current;
+      }
+    }, [forwardedRef]);
+
+    useEffect(() => {
+      const currentElement = internalRef.current;
+      if (!currentElement) return;
+
+      registerMarker(currentElement);
+      return () => removeMarker(currentElement);
+    }, [registerMarker, removeMarker, marker]);
+
+    return (
+      <StyledMarker
+        data-component-name="Marker/Marker"
+        ref={internalRef}
+        marker={marker}
+        {...(dataAttribures ?? {})}
+      />
+    );
+  },
+);
+
+const StyledMarker = styled.div<{ marker: MarkerArea }>`
+  position: absolute;
+  z-index: -1;
+  top: ${({ marker }) => marker.offset}px;
+  height: ${({ marker }) => marker.height}px;
+  width: 100%;
+  left: 0;
+`;

package/src/core/contexts/CodeWalkthrough/CodeWalkthroughStepsContext.tsx

@@ -1,10 +1,13 @@
 import { createContext } from 'react';
 
-import type { WalkthroughStepsState } from '@redocly/theme/core/hooks';
+import type { WalkthroughStepsState } from '@redocly/theme/core/types';
 
 export const CodeWalkthroughStepsContext = createContext<WalkthroughStepsState>({
+  markers: {},
   activeStep: null,
   setActiveStep: () => {},
-  register: () => {},
-  unregister: () => {},
+  registerStep: () => {},
+  registerMarker: () => {},
+  removeMarker: () => {},
+  removeStep: () => {},
 });