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

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

@@ -1,8 +1,17 @@
-import React, { useContext, useRef, type PropsWithChildren, useEffect, useState } from 'react';
+import React, {
+  useContext,
+  useRef,
+  type PropsWithChildren,
+  useEffect,
+  useState,
+  useMemo,
+  useCallback,
+} from 'react';
 import styled from 'styled-components';
 
 import type { WithConditions } from '@redocly/config';
 
+import { Marker } from '@redocly/theme/components/Marker/Marker';
 import {
   CodeWalkthroughControlsStateContext,
   CodeWalkthroughStepsContext,
@@ -10,32 +19,46 @@ import {
 
 export type CodeStepProps = WithConditions<{
   id: string;
-  stepKey: number;
   heading?: string;
 }>;
 
 export function CodeStep({
   id,
   heading,
-  stepKey,
   when,
   unless,
   children,
 }: PropsWithChildren<CodeStepProps>) {
   const compRef = useRef<HTMLDivElement | null>(null);
+  const markerRef = useRef<HTMLDivElement | null>(null);
+
   const { areConditionsMet } = useContext(CodeWalkthroughControlsStateContext);
-  const { activeStep, setActiveStep, register, unregister, lockObserver, filtersElementRef } =
-    useContext(CodeWalkthroughStepsContext);
+  const {
+    activeStep,
+    setActiveStep,
+    markers,
+    registerStep,
+    removeStep,
+    registerMarker,
+    removeMarker,
+    lockObserver,
+    filtersElementRef,
+  } = useContext(CodeWalkthroughStepsContext);
   const isActive = activeStep === id;
 
   const [scrollMarginTop, setScrollMarginTop] = useState(0);
+  const marker = useMemo(() => markers[id], [markers, id]);
+  const isVisible = useMemo(
+    () => areConditionsMet({ when, unless }),
+    [areConditionsMet, when, unless],
+  );
 
-  const handleActivateStep = () => {
+  const handleActivateStep = 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);
@@ -43,7 +66,17 @@ export function CodeStep({
         lockObserver.current = false;
       }, 1000);
     }
-  };
+  }, [setActiveStep, lockObserver, id]);
+
+  const handleRegisterMarker = useCallback(
+    (element: HTMLElement) => registerMarker(id, element),
+    [registerMarker, id],
+  );
+
+  const handleRemoveMarker = useCallback(
+    (element: HTMLElement) => removeMarker(id, element),
+    [removeMarker, id],
+  );
 
   useEffect(() => {
     // If the step is active during first render, scroll to it
@@ -59,14 +92,14 @@ export function CodeStep({
 
   useEffect(() => {
     const currentCompRef = compRef.current;
-    if (currentCompRef) {
+    if (currentCompRef && isVisible) {
       currentCompRef
         .querySelectorAll<HTMLElement>('a, button, input, textarea, select, [tabindex]')
         .forEach((el) => {
           el.setAttribute('tabindex', '-1');
         });
 
-      register(currentCompRef);
+      registerStep(id, currentCompRef);
     }
 
     const filtersElementHeight = filtersElementRef?.current?.clientHeight || 0;
@@ -74,37 +107,44 @@ export function CodeStep({
     setScrollMarginTop(filtersElementHeight + navbarHeight + 10);
 
     return () => {
-      if (currentCompRef) {
-        unregister(currentCompRef);
-      }
+      removeStep(id);
     };
-  }, [activeStep, register, unregister, filtersElementRef]);
+  }, [filtersElementRef, registerStep, removeStep, id, isVisible]);
 
-  if (!areConditionsMet({ when, unless })) {
-    if (isActive) {
-      setActiveStep(null);
-    }
+  if (!isVisible) {
     return null;
   }
 
   return (
-    <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"
-    >
-      <StepContent isActive={isActive}>
-        {heading ? <StepHeading>{heading}</StepHeading> : null}
-        {children}
-      </StepContent>
-    </StepWrapper>
+    <>
+      {marker && (
+        <Marker
+          ref={markerRef}
+          marker={marker}
+          registerMarker={handleRegisterMarker}
+          removeMarker={handleRemoveMarker}
+          dataAttribures={{
+            'data-step-id': id,
+            'data-step-active': isActive,
+          }}
+        />
+      )}
+      <StepWrapper
+        data-component-name="Markdoc/CodeWalkthrough/CodeStep"
+        ref={compRef}
+        isActive={isActive}
+        scrollMarginTop={scrollMarginTop}
+        onClick={handleActivateStep}
+        onFocus={handleActivateStep}
+        tabIndex={0}
+        className="code-step-wrapper"
+      >
+        <StepContent isActive={isActive}>
+          {heading ? <StepHeading>{heading}</StepHeading> : null}
+          {children}
+        </StepContent>
+      </StepWrapper>
+    </>
   );
 }
 

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

@@ -1,4 +1,4 @@
-import React, { type PropsWithChildren } from 'react';
+import React, { useRef, type PropsWithChildren } from 'react';
 import styled from 'styled-components';
 
 import type { CodeWalkthroughAttr } from '@redocly/config';
@@ -17,10 +17,13 @@ import {
 export type CodeWalkthroughProps = PropsWithChildren<CodeWalkthroughAttr>;
 
 export function CodeWalkthrough({ children, steps, preview, ...attributes }: CodeWalkthroughProps) {
-  const { controlsState, stepsState, files, downloadAssociatedFiles } = useCodeWalkthrough(
+  const root = useRef<HTMLDivElement>(null);
+
+  const { controlsState, stepsState, files, downloadAssociatedFiles } = useCodeWalkthrough({
     steps,
     attributes,
-  );
+    root,
+  });
   const { activeFilters, getControlState, changeControlState } = controlsState;
   const { filtersElementRef } = stepsState;
 
@@ -28,6 +31,7 @@ export function CodeWalkthrough({ children, steps, preview, ...attributes }: Cod
     <CodeWalkthroughStepsContext.Provider value={stepsState}>
       <CodeWalkthroughControlsStateContext.Provider value={controlsState}>
         <CodeWalkthroughWrapper
+          ref={root}
           className="code-walkthrough"
           data-component-name="Markdoc/CodeWalkthrough/CodeWalkthrough"
         >
@@ -53,6 +57,7 @@ export function CodeWalkthrough({ children, steps, preview, ...attributes }: Cod
 }
 
 const CodeWalkthroughWrapper = styled.div`
+  position: relative;
   display: grid;
   grid-template-columns: 4fr 6fr;
 

package/src/markdoc/tags/code-step.ts

@@ -17,9 +17,6 @@ export const codeStep: MarkdocSchemaWrapper = {
       unless: {
         type: Object,
       },
-      stepKey: {
-        type: Number, // internal
-      },
     },
 
     render: 'CodeStep',

package/src/markdoc/tags/code-walkthrough.ts

@@ -187,7 +187,6 @@ export function collectStepsFromChildren(
 ): RenderableTreeNode[] {
   return children.flatMap((child) => {
     if (child instanceof markdoc.Tag && child.name === 'CodeStep') {
-      child.attributes.stepKey = idx++;
       return [child];
     }
 

package/lib/core/hooks/use-page-active-version.d.ts

@@ -1 +0,0 @@
-export declare function usePageActiveVersion(): string | undefined;