@redocly/theme 0.47.1 → 0.48.1

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

@@ -1,10 +1,9 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import styled, { css } from 'styled-components';
 
 import type { CodeWalkthroughFile } from '@redocly/config';
 
-import { useThemeHooks } from '@redocly/theme/core/hooks';
-import { getFileIconByExt } from '@redocly/theme/core/utils';
+import { useThemeHooks, useRenderableFiles, type RenderableFile } from '@redocly/theme/core/hooks';
 import { OverflowMenuVerticalIcon } from '@redocly/theme/icons/OverflowMenuVerticalIcon/OverflowMenuVerticalIcon';
 import { Dropdown } from '@redocly/theme/components/Dropdown/Dropdown';
 import { DropdownMenu } from '@redocly/theme/components/Dropdown/DropdownMenu';
@@ -25,32 +24,45 @@ export function CodePanelHeader({
   activeTabName,
   onDownloadCode,
 }: CodePanelHeaderProps): JSX.Element {
+  const renderableFiles = useRenderableFiles(files);
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
   const tabRefs = useRef<HTMLButtonElement[]>([]);
   const tabsWrapperRef = useRef<HTMLDivElement>(null);
-  const [hiddenFiles, setHiddenFiles] = useState<CodeWalkthroughFile[]>([]);
+  const [hiddenFiles, setHiddenFiles] = useState<RenderableFile[]>([]);
 
   useEffect(() => {
     const activeTab = tabRefs.current.find((tab) => tab?.dataset.name === activeTabName);
-    if (activeTab) {
-      activeTab.scrollIntoView({ block: 'nearest', inline: 'center' });
+    const tabsWrapper = tabsWrapperRef.current;
+
+    if (activeTab && tabsWrapper) {
+      const { left: wrapperLeft, right: wrapperRight } = tabsWrapper.getBoundingClientRect();
+      const { left: tabLeft, right: tabRight } = activeTab.getBoundingClientRect();
+      const tabHidden = tabLeft < wrapperLeft || tabRight > wrapperRight;
+
+      if (tabHidden) {
+        activeTab.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+      }
     }
-  }, [activeTabName]);
 
-  useEffect(() => {
     const calculateHiddenFiles = () => {
       if (!tabsWrapperRef.current) return;
       const { left: wrapperLeft, right: wrapperRight } =
         tabsWrapperRef.current.getBoundingClientRect();
 
-      const hidden = files.filter((_, i) => {
+      const hidden: RenderableFile[] = [];
+
+      for (let i = 0; i < renderableFiles.length; i++) {
         const tab = tabRefs.current[i];
-        if (!tab) return false;
+        if (!tab) continue;
+
         const { left: tabLeft, right: tabRight } = tab.getBoundingClientRect();
+        const visible = tabLeft > wrapperLeft && tabRight < wrapperRight;
 
-        return tabLeft < wrapperLeft || tabRight > wrapperRight;
-      });
+        if (!visible) {
+          hidden.push(renderableFiles[i]);
+        }
+      }
 
       setHiddenFiles(hidden);
     };
@@ -58,32 +70,29 @@ export function CodePanelHeader({
     calculateHiddenFiles();
     window.addEventListener('resize', calculateHiddenFiles);
     return () => window.removeEventListener('resize', calculateHiddenFiles);
-  }, [files]);
-
-  const getFileTypeIcon = useCallback((basename: string) => {
-    const extension = basename.split('.').pop()?.toLowerCase() || '';
-    return getFileIconByExt(extension);
-  }, []);
+  }, [activeTabName, files, renderableFiles]);
 
   return (
     <CodePanelHeaderWrapper data-component-name="Markdoc/CodeWalkthrough/CodePanelHeader">
       <TabsWrapper ref={tabsWrapperRef}>
         <Tabs>
-          {files.map(({ path, basename }, i) => {
-            const FileIcon = getFileTypeIcon(basename);
-            return (
-              <Tab
-                ref={(el: HTMLButtonElement) => (tabRefs.current[i] = el)}
-                data-name={path}
-                active={path === activeTabName}
-                key={i}
-                onClick={() => handleTabSwitch(path)}
-              >
-                <FileIcon />
-                {basename}
-              </Tab>
-            );
-          })}
+          {renderableFiles.map(
+            ({ path, basename, FileIcon, parentFolder, isNameDuplicate, inRootDir }, i) => {
+              return (
+                <Tab
+                  ref={(el: HTMLButtonElement) => (tabRefs.current[i] = el)}
+                  data-name={path}
+                  active={path === activeTabName}
+                  key={i}
+                  onClick={() => handleTabSwitch(path)}
+                >
+                  <FileIcon />
+                  {basename}
+                  {isNameDuplicate && !inRootDir ? <Dirname>{parentFolder}</Dirname> : null}
+                </Tab>
+              );
+            },
+          )}
         </Tabs>
         <Gradient />
       </TabsWrapper>
@@ -92,18 +101,21 @@ export function CodePanelHeader({
         {hiddenFiles.length ? (
           <Dropdown trigger={<StyledOverflowMenuVerticalIcon size="14px" />} alignment="end">
             <StyledDropdownMenu>
-              {hiddenFiles.map(({ path, basename }, i) => {
-                const FileIcon = getFileTypeIcon(basename);
-                return (
-                  <DropdownMenuItem
-                    active={path === activeTabName}
-                    key={i}
-                    onAction={() => handleTabSwitch(path)}
-                    prefix={<FileIcon />}
-                    content={basename}
-                  />
-                );
-              })}
+              {hiddenFiles.map(
+                ({ path, basename, FileIcon, isNameDuplicate, inRootDir, parentFolder }, i) => {
+                  return (
+                    <DropdownMenuItem
+                      active={path === activeTabName}
+                      key={i}
+                      onAction={() => handleTabSwitch(path)}
+                      prefix={<FileIcon />}
+                      content={
+                        isNameDuplicate && !inRootDir ? `${parentFolder}/${basename}` : basename
+                      }
+                    />
+                  );
+                },
+              )}
             </StyledDropdownMenu>
           </Dropdown>
         ) : null}
@@ -141,7 +153,7 @@ const Gradient = styled.div`
 
 const Tabs = styled.div`
   display: flex;
-  overflow-x: auto;
+  overflow-x: hidden;
   padding-right: var(--spacing-base);
 
   &::-webkit-scrollbar {
@@ -149,6 +161,11 @@ const Tabs = styled.div`
   }
 `;
 
+const Dirname = styled.span`
+  font-size: var(--font-size-sm);
+  color: var(--text-color-description);
+`;
+
 const ActionBar = styled.div`
   display: flex;
 `;
@@ -164,7 +181,7 @@ const Tab = styled.button<{ active: boolean }>`
   gap: var(--spacing-xs);
   color: var(--text-color-secondary);
   white-space: nowrap;
-
+  scroll-margin-right: var(--spacing-base);
   ${({ active }) =>
     active
       ? css`

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

@@ -11,7 +11,7 @@ export function CodePanelPreview({ children }: PropsWithChildren): JSX.Element {
   const { translate } = useTranslate();
 
   return (
-    <CodePanelPreviewWrapper>
+    <CodePanelPreviewWrapper data-component-name="Markdoc/CodeWalkthrough/CodePanelPreview">
       <PreviewDropdown onClick={() => setIsOpen(!isOpen)}>
         {translate('codeWalkthrough.preview', 'Preview')}
         {isOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}

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

@@ -16,7 +16,7 @@ export function CodePanelToolbar({ file }: CodeToolbarProps): JSX.Element {
   const fileContent = getFileText(file);
 
   return (
-    <CodeToolbarWrapper>
+    <CodeToolbarWrapper data-component-name="Markdoc/CodeWalkthrough/CodePanelToolbar">
       <CopyButton data={fileContent} type="compound" variant="secondary" size="medium" />
     </CodeToolbarWrapper>
   );

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

@@ -35,7 +35,7 @@ export function CodeStep({
       lockObserver.current = true;
 
       if (compRef.current) {
-        compRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        compRef.current.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
       }
 
       setActiveStep(id);
@@ -70,7 +70,7 @@ export function CodeStep({
 
     const filtersElementHeight = filtersElementRef?.current?.clientHeight || 0;
     const navbarHeight = document.querySelector('nav')?.clientHeight || 0;
-    setScrollMarginTop(filtersElementHeight + navbarHeight);
+    setScrollMarginTop(filtersElementHeight + navbarHeight + 10);
 
     return () => {
       if (currentCompRef) {
@@ -80,11 +80,15 @@ export function CodeStep({
   }, [activeStep, register, unregister, filtersElementRef]);
 
   if (!areConditionsMet({ when, unless })) {
+    if (isActive) {
+      setActiveStep(null);
+    }
     return null;
   }
 
   return (
     <StepWrapper
+      data-component-name="Markdoc/CodeWalkthrough/CodeStep"
       ref={compRef}
       isActive={isActive}
       scrollMarginTop={scrollMarginTop}

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

@@ -23,7 +23,7 @@ export function CodeToggle(props: CodeToggleProps) {
   const checked = toggleState.value;
 
   return (
-    <ToggleWrapper>
+    <ToggleWrapper data-component-name="Markdoc/CodeWalkthrough/CodeToggle">
       <ToggleContentWrapper>
         <ToggleSubtitle>
           <Switch value={checked} onChange={(newValue) => changeToggleState(id, newValue)} />

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

@@ -28,7 +28,10 @@ export function CodeWalkthrough({ children, steps, preview, ...attributes }: Cod
   return (
     <CodeWalkthroughStepsContext.Provider value={stepsState}>
       <CodeWalkthroughControlsStateContext.Provider value={controlsState}>
-        <CodeWalkthroughWrapper className="code-walkthrough">
+        <CodeWalkthroughWrapper
+          className="code-walkthrough"
+          data-component-name="Markdoc/CodeWalkthrough/CodeWalkthrough"
+        >
           <DocsPanel>
             <CodeFilters
               filters={activeFilters}

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

@@ -41,7 +41,7 @@ export function Input(props: InputProps) {
   };
 
   return (
-    <InputWrapper>
+    <InputWrapper data-component-name="Markdoc/CodeWalkthrough/Input">
       {label && <Label>{label}</Label>}
       <StyledInput
         id={id}
@@ -57,7 +57,8 @@ export function Input(props: InputProps) {
 const InputWrapper = styled.div`
   display: flex;
   flex-direction: column;
-  margin: var(--md-paragraph-margin);
+  margin-top: var(--spacing-base);
+  margin-bottom: var(--spacing-base);
 `;
 
 const Label = styled.p`
@@ -66,6 +67,7 @@ const Label = styled.p`
   line-height: var(--line-height-base);
   font-family: var(--font-family-base);
   font-weight: var(--font-weight-medium);
+  margin-bottom: var(--spacing-xxs) !important;
 `;
 
 const StyledInput = styled.input`

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

@@ -44,6 +44,11 @@ export const codeWalkthrough: MarkdocSchemaWrapper = {
         render: false,
         required: false,
       },
+      __idx: {
+        type: Number,
+        render: true,
+        required: false,
+      },
     },
     slots: {
       preview: { required: false, render: true },