@redocly/theme 0.47.1 → 0.48.1

package/src/components/Feedback/Sentiment.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useEffect } from 'react';
 import styled from 'styled-components';
 
-import type { ReasonsSettingsSchema, AnonymousUserEmailSettings } from '@redocly/config';
+import type { OptionalEmailSettings, ReasonsSettingsSchema } from '@redocly/config';
 import type { ReasonsProps } from '@redocly/theme/components/Feedback/Reasons';
 
 import { Reasons } from '@redocly/theme/components/Feedback/Reasons';
@@ -32,7 +32,7 @@ export type SentimentProps = {
       like?: ReasonsSettingsSchema;
       dislike?: ReasonsSettingsSchema;
     };
-    anonymousUserEmail?: AnonymousUserEmailSettings;
+    optionalEmail?: OptionalEmailSettings;
   };
   className?: string;
 };
@@ -43,7 +43,7 @@ export function Sentiment({ settings, onSubmit, className }: SentimentProps): JS
     submitText,
     comment: commentSettings,
     reasons: reasonsSettings,
-    anonymousUserEmail: anonymousUserEmailSettings,
+    optionalEmail: optionalEmailSettings,
   } = settings || {};
   const [isSubmitted, setIsSubmitted] = React.useState(false);
   const [score, setScore] = React.useState(0);
@@ -87,8 +87,7 @@ export function Sentiment({ settings, onSubmit, className }: SentimentProps): JS
   const displayReasons = checkIfShouldDisplayReasons(score);
   const displayComment = !!(score && !commentSettings?.hide);
   const displaySubmitBnt = !!(score && (displayReasons || displayComment));
-  const displayFeedbackEmail =
-    !!score && anonymousUserEmailSettings?.enabled && !userData.isAuthenticated;
+  const displayFeedbackEmail = !!score && !optionalEmailSettings?.hide && !userData.isAuthenticated;
 
   const commentLabel =
     score === 1
@@ -214,18 +213,18 @@ export function Sentiment({ settings, onSubmit, className }: SentimentProps): JS
 
         {displayFeedbackEmail && (
           <StyledFormOptionalFields>
-            <Label data-translation-key="feedback.settings.anonymousUserEmail.label">
-              {anonymousUserEmailSettings?.label ||
+            <Label data-translation-key="feedback.settings.optionalEmail.label">
+              {optionalEmailSettings?.label ||
                 translate(
-                  'feedback.settings.anonymousUserEmail.label',
+                  'feedback.settings.optionalEmail.label',
                   'Your email (optional, for follow-up)',
                 )}
             </Label>
             <EmailInput
               onChange={onEmailChange}
               placeholder={
-                anonymousUserEmailSettings?.placeholder ||
-                translate('feedback.settings.anonymousUserEmail.placeholder', 'username@mail.com')
+                optionalEmailSettings?.placeholder ||
+                translate('feedback.settings.optionalEmail.placeholder', 'yourname@example.com')
               }
               type="email"
               required={!!email}

package/src/components/Search/SearchDialog.tsx

@@ -44,6 +44,7 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
     setLoadMore,
     advancedSearch,
     askAi,
+    groupField,
   } = useSearch(product?.name, autoSearchDisabled);
   const {
     isFilterOpen,
@@ -51,7 +52,7 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
     onFilterChange,
     onFilterReset,
     onFacetReset,
-    onTopFacetsReset,
+    onQuickFilterReset,
   } = useSearchFilter(filter, setFilter);
   const aiSearch = useAiSearch({ filter });
 
@@ -83,10 +84,10 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
   };
 
   const showLoadMore = (groupKey: string, currentCount: number = 0) => {
-    const topFacet = facets.find((facet) => facet.isTop);
+    const groupFacet = facets.find((facet) => facet.field === groupField);
     let needLoadMore = false;
-    if (topFacet) {
-      const groupValue = topFacet.values.find((value) => {
+    if (groupFacet) {
+      const groupValue = groupFacet.values.find((value) => {
         if (typeof value === 'object') {
           return value.value === groupKey;
         } else return false;
@@ -152,7 +153,7 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
                     }
                   }}
                 >
-                  {translate('search.aiButton', 'Search with AI')}
+                  {translate('search.ai.button', 'Search with AI')}
                 </SearchAiButton>
               ) : null}
               {showSearchFilterButton && (
@@ -170,14 +171,17 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
                   facets={facets}
                   searchFilter={filter}
                   onFilterChange={onFilterChange}
-                  onTopFacetsReset={onTopFacetsReset}
+                  onQuickFilterReset={onQuickFilterReset}
+                  groupField={groupField}
                 />
                 {showResults ? (
                   items && Object.keys(items).some((key) => items[key]?.length) ? (
                     Object.keys(items).map((key) =>
                       items[key]?.length ? (
                         <Fragment key={key}>
-                          <SearchGroupTitle>{key}</SearchGroupTitle>
+                          <SearchGroupTitle data-testid="search-group-title">
+                            {key}
+                          </SearchGroupTitle>
                           {items[key]?.map(mapItem)}
                           {showLoadMore(key, items[key]?.length || 0) && (
                             <SearchGroupFooter
@@ -215,6 +219,7 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
                     facets={facets}
                     filter={filter}
                     query={query}
+                    quickFilterFields={[groupField]}
                     onFilterChange={onFilterChange}
                     onFilterReset={onFilterReset}
                     onFacetReset={onFacetReset}
@@ -231,41 +236,50 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
             />
           )}
         </SearchDialogBody>
-        {mode === 'search' && (
-          <SearchDialogFooter>
-            <SearchShortcuts>
-              <SearchShortcut
-                data-translation-key="search.keys.navigate"
-                combination="Tab"
-                text={translate('search.keys.navigate', 'to navigate')}
-              />
-              <SearchShortcut
-                data-translation-key="search.keys.select"
-                combination="⏎"
-                text={translate('search.keys.select', 'to select')}
-              />
-              <SearchShortcut
-                data-translation-key="search.keys.exit"
-                combination="Esc"
-                text={translate('search.keys.exit', 'to exit')}
-              />
-            </SearchShortcuts>
-            {isSearchLoading && (
-              <SearchLoading>
-                <SpinnerLoader size="16px" color="var(--search-input-icon-color)" />
-                {translate('search.loading', 'Loading...')}
-              </SearchLoading>
-            )}
-            <SearchCancelButton
-              data-translation-key="search.cancel"
-              variant="secondary"
-              size="small"
-              onClick={onClose}
-            >
-              {translate('search.cancel', 'Cancel')}
-            </SearchCancelButton>
-          </SearchDialogFooter>
-        )}
+        <SearchDialogFooter>
+          {mode === 'ai-dialog' ? (
+            <AiDisclaimer>
+              {translate(
+                'search.ai.disclaimer',
+                'AI search might provide incomplete or incorrect results. Verify important information.',
+              )}
+            </AiDisclaimer>
+          ) : (
+            <>
+              <SearchShortcuts>
+                <SearchShortcut
+                  data-translation-key="search.keys.navigate"
+                  combination="Tab"
+                  text={translate('search.keys.navigate', 'to navigate')}
+                />
+                <SearchShortcut
+                  data-translation-key="search.keys.select"
+                  combination="⏎"
+                  text={translate('search.keys.select', 'to select')}
+                />
+                <SearchShortcut
+                  data-translation-key="search.keys.exit"
+                  combination="Esc"
+                  text={translate('search.keys.exit', 'to exit')}
+                />
+              </SearchShortcuts>
+              {isSearchLoading && (
+                <SearchLoading>
+                  <SpinnerLoader size="16px" color="var(--search-input-icon-color)" />
+                  {translate('search.loading', 'Loading...')}
+                </SearchLoading>
+              )}
+              <SearchCancelButton
+                data-translation-key="search.cancel"
+                variant="secondary"
+                size="small"
+                onClick={onClose}
+              >
+                {translate('search.cancel', 'Cancel')}
+              </SearchCancelButton>
+            </>
+          )}
+        </SearchDialogFooter>
       </SearchDialogWrapper>
     </SearchOverlay>
   );
@@ -434,3 +448,10 @@ const SearchHeaderButtons = styled.div`
   padding-left: var(--search-header-buttons-padding-left);
   border-left: var(--search-header-buttons-border-left);
 `;
+
+const AiDisclaimer = styled.div`
+  font-size: var(--search-ai-disclaimer-font-size);
+  line-height: var(--search-ai-disclaimer-line-height);
+  color: var(--search-ai-disclaimer-text-color);
+  margin: 0 auto;
+`;

package/src/components/Search/SearchFilter.tsx

@@ -13,7 +13,8 @@ export type SearchFilterProps = {
   facets: SearchFacet[];
   filter: SearchFilterItem[];
   query: string;
-  onFilterChange: (field: string, value: string | string[], isTop?: boolean) => void;
+  quickFilterFields: string[];
+  onFilterChange: (field: string, value: string | string[], isQuickFilter?: boolean) => void;
   onFilterReset: () => void;
   onFacetReset: (field: string) => void;
 };
@@ -23,6 +24,7 @@ export function SearchFilter({
   facets,
   filter,
   query,
+  quickFilterFields,
   onFilterChange,
   onFilterReset,
   onFacetReset,
@@ -50,10 +52,11 @@ export function SearchFilter({
           <SearchFilterField
             key={`${facet.field}-${index}`}
             facet={facet}
-            onFilterChange={onFilterChange}
-            onFacetReset={onFacetReset}
             filter={filter}
             query={query}
+            quickFilterFields={quickFilterFields}
+            onFilterChange={onFilterChange}
+            onFacetReset={onFacetReset}
           />
         ))}
       </SearchFilterFields>

package/src/components/Search/SearchFilterField.tsx

@@ -14,7 +14,8 @@ type SearchFilterFieldProps = {
   facet: SearchFacet;
   filter: SearchFilterItem[];
   query: string;
-  onFilterChange: (field: string, value: string | string[], isTop?: boolean) => void;
+  quickFilterFields: string[];
+  onFilterChange: (field: string, value: string | string[], isQuickFilter?: boolean) => void;
   onFacetReset: (filed: string) => void;
 };
 
@@ -23,6 +24,7 @@ export function SearchFilterField({
   facet,
   filter,
   query,
+  quickFilterFields,
   onFilterChange,
   onFacetReset,
 }: SearchFilterFieldProps): JSX.Element {
@@ -31,7 +33,7 @@ export function SearchFilterField({
   const selectedValues = filter.find((item) => item.field === facet.field)?.values || [];
 
   const onChange = (value: string | string[]) => {
-    onFilterChange(facet.field, value, facet.isTop);
+    onFilterChange(facet.field, value, facet.field in quickFilterFields);
   };
 
   const onReset = () => {

package/src/components/Search/SearchGroups.tsx

@@ -1,24 +1,29 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
-import type { SearchFacet, SearchFacetCount, SearchFilterItem } from '@redocly/theme';
-
+import {
+  type SearchFacet,
+  type SearchFacetCount,
+  type SearchFilterItem,
+} from '@redocly/theme/core/types';
 import { Tag } from '@redocly/theme/components/Tag/Tag';
 
 type SearchGroupsProps = {
   facets: SearchFacet[];
   searchFilter: SearchFilterItem[];
-  onFilterChange: (field: string, value: string[], isTop?: boolean) => void;
-  onTopFacetsReset: () => void;
+  groupField: string;
+  onFilterChange: (field: string, value: string[], isQuickFilter?: boolean) => void;
+  onQuickFilterReset: () => void;
 };
 
 export function SearchGroups({
   facets,
   searchFilter,
+  groupField,
   onFilterChange,
-  onTopFacetsReset,
+  onQuickFilterReset,
 }: SearchGroupsProps): JSX.Element {
-  const groupFacets = facets.filter((facet) => facet.isTop);
+  const groupFacets = facets.filter((facet) => facet.field === groupField);
 
   const handleGroupTagClick = (
     value: string,
@@ -36,8 +41,8 @@ export function SearchGroups({
     <SearchGroupsWrapper>
       <GroupTag
         borderless
-        active={!searchFilter.some((item) => item.isTop)}
-        onClick={() => searchFilter.some((item) => item.isTop) && onTopFacetsReset()}
+        active={!searchFilter.some((item) => item.isQuickFilter)}
+        onClick={() => searchFilter.some((item) => item.isQuickFilter) && onQuickFilterReset()}
       >
         All
       </GroupTag>

package/src/components/Search/variables.ts

@@ -176,5 +176,9 @@ export const search = css`
   --search-ai-resource-tag-text-color: var(--text-color-secondary);
   --search-ai-resource-tag-icon-color: var(--text-color-secondary);
 
+  --search-ai-disclaimer-font-size: var(--font-size-sm);
+  --search-ai-disclaimer-line-height: var(--line-height-sm);
+  --search-ai-disclaimer-text-color: var(--text-color-secondary);
+
   // @tokens End
 `;

package/src/components/Segmented/Segmented.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 
-import type { ReactElement } from 'react';
+import type { ForwardedRef, ReactElement } from 'react';
 import type { SelectOption } from '@redocly/theme/core/types/select';
 
 import { typedMemo } from '@redocly/theme/core/hoc/typedMemo';
@@ -14,15 +14,13 @@ export type SegmentedProps<T> = {
   size?: 'regular' | 'small';
 };
 
-function SegmentedComponent<T>({
-  options,
-  onChange,
-  value,
-  className = '',
-  size = 'regular',
-}: SegmentedProps<T>): ReactElement {
+function SegmentedComponent<T>(
+  { options, onChange, value, className = '', size = 'regular' }: SegmentedProps<T>,
+  ref?: ForwardedRef<HTMLDivElement>,
+): ReactElement {
   return (
     <SegmentedGroup
+      ref={ref}
       data-component-name="Segmented/Segmented"
       className={`tag-grey ${size} ${className}`}
       role="tablist"
@@ -43,7 +41,9 @@ function SegmentedComponent<T>({
   );
 }
 
-export const Segmented = typedMemo(SegmentedComponent);
+export const Segmented = typedMemo(forwardRef(SegmentedComponent)) as <T>(
+  props: SegmentedProps<T> & { ref?: ForwardedRef<HTMLDivElement> },
+) => ReactElement;
 
 const SegmentedGroup = styled.div`
   display: flex;

package/src/components/Tag/Tag.tsx

@@ -83,7 +83,7 @@ export function Tag({
   );
 }
 
-const ContentWrapper = styled.div`
+export const ContentWrapper = styled.div`
   display: inline-flex;
   align-items: center;
   justify-content: center;

package/src/core/hooks/__mocks__/search/use-search-filter.ts

@@ -5,6 +5,6 @@ export const useSearchFilter = jest.fn(() => {
     onFilterChange: () => {},
     onFilterToggle: () => {},
     onFilterReset: () => {},
-    onTopFacetsReset: () => {},
+    onQuickFilterReset: () => {},
   };
 });

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

@@ -60,6 +60,7 @@ export function useCodeWalkthroughControls(
   filters: Record<string, CodeWalkthroughFilter>,
   inputs: InputsMarkdocAttr,
   toggles: TogglesMarkdocAttr,
+  enableDeepLink: boolean,
 ): WalkthroughControlsState {
   const location = useLocation();
   const navigate = useNavigate();
@@ -72,7 +73,7 @@ export function useCodeWalkthroughControls(
         ...toggle,
         render: true,
         type: 'toggle',
-        value: searchParams.get(id) === 'true',
+        value: enableDeepLink ? searchParams.get(id) === 'true' : false,
       };
     }
     return initialState;
@@ -116,7 +117,7 @@ export function useCodeWalkthroughControls(
         ...input,
         render: true,
         type: 'input',
-        value: searchParams.get(id) || input.value,
+        value: enableDeepLink ? (searchParams.get(id) ?? input.value) : input.value,
       };
     }
     return initialState;
@@ -156,11 +157,12 @@ export function useCodeWalkthroughControls(
     const initialState: FiltersState = {};
 
     for (const [id, filter] of Object.entries(filters)) {
+      const defaultValue = filter?.items?.[0]?.value || '';
       initialState[id] = {
         ...filter,
         render: true,
         type: 'filter',
-        value: searchParams.get(id) || filter?.items?.[0]?.value || '',
+        value: enableDeepLink ? (searchParams.get(id) ?? defaultValue) : defaultValue,
       };
     }
 
@@ -270,6 +272,10 @@ export function useCodeWalkthroughControls(
    * Update the URL search params with the current state of the filters and inputs
    */
   useEffect(() => {
+    if (!enableDeepLink) {
+      return;
+    }
+
     const newSearchParams = new URLSearchParams(Array.from(searchParams.entries()));
 
     for (const [id, { value }] of Object.entries(state)) {

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

@@ -8,9 +8,9 @@ import { ACTIVE_STEP_QUERY_PARAM } from '@redocly/theme/core/constants';
 
 type ActiveStep = string | null;
 type CodeWalkthroughStep = CodeWalkthroughStepAttr & {
-  active?: boolean;
   compRef?: HTMLElement;
 };
+
 export type WalkthroughStepsState = {
   activeStep: ActiveStep;
   setActiveStep: (stepId: ActiveStep) => void;
@@ -20,7 +20,10 @@ export type WalkthroughStepsState = {
   filtersElementRef?: React.RefObject<HTMLDivElement>;
 };
 
-export function useCodeWalkthroughSteps(steps: CodeWalkthroughStep[]): WalkthroughStepsState {
+export function useCodeWalkthroughSteps(
+  steps: CodeWalkthroughStep[],
+  enableDeepLink: boolean,
+): WalkthroughStepsState {
   const location = useLocation();
   const navigate = useNavigate();
   const searchParams = useMemo(() => new URLSearchParams(location.search), [location.search]);
@@ -32,7 +35,7 @@ export function useCodeWalkthroughSteps(steps: CodeWalkthroughStep[]): Walkthrou
   const observedElementsRef = useRef(new Set<HTMLElement>());
 
   const [activeStep, setActiveStep] = useState<ActiveStep>(
-    searchParams.get(ACTIVE_STEP_QUERY_PARAM),
+    enableDeepLink ? searchParams.get(ACTIVE_STEP_QUERY_PARAM) : null,
   );
 
   const register = useCallback(
@@ -74,28 +77,23 @@ export function useCodeWalkthroughSteps(steps: CodeWalkthroughStep[]): Walkthrou
         return;
       }
 
-      const stepsEntries = [];
+      const renderedSteps = steps.filter((step) => Boolean(step.compRef));
+
+      if (renderedSteps.length < 2) {
+        setActiveStep(renderedSteps[0]?.id || null);
+        return;
+      }
+
       for (const entry of entries) {
-        const { target } = entry;
-        const stepKey = Number((target as HTMLElement)?.dataset?.stepKey);
-        const stepActive = (target as HTMLElement)?.dataset?.stepActive === 'true';
+        const stepKey = Number((entry.target as HTMLElement)?.dataset?.stepKey);
 
         if (!Number.isInteger(stepKey) || stepKey < 0) {
           continue;
         }
 
+        const { intersectionRatio, boundingClientRect, rootBounds, isIntersecting } = entry;
         const step = steps[stepKey];
-        step.active = stepActive;
-        stepsEntries.push(entry);
-      }
 
-      for (const stepEntry of stepsEntries) {
-        const { target, intersectionRatio, boundingClientRect, rootBounds, isIntersecting } =
-          stepEntry;
-        const stepKey = Number((target as HTMLElement)?.dataset?.stepKey);
-        const step = steps[stepKey];
-
-        const renderedSteps = steps.filter((step) => Boolean(step.compRef));
         const stepIndex = renderedSteps.findIndex(
           (renderedStep) => renderedStep.stepKey === step.stepKey,
         );
@@ -105,6 +103,16 @@ export function useCodeWalkthroughSteps(steps: CodeWalkthroughStep[]): Walkthrou
           rootBounds?.bottom !== undefined && boundingClientRect.top < rootBounds.top;
         const stepGoesIn = isIntersecting;
 
+        if (
+          intersectionRatio > 0.8 &&
+          intersectionRatio < 1 &&
+          intersectionAtTop &&
+          activeStep === null
+        ) {
+          setActiveStep(step.id);
+          break;
+        }
+
         if (intersectionRatio < 1 && intersectionRatio !== 0 && intersectionAtTop) {
           let newStep: string | null = null;
 
@@ -128,7 +136,7 @@ export function useCodeWalkthroughSteps(steps: CodeWalkthroughStep[]): Walkthrou
     const filtersElementHeight = filtersElementRef.current?.clientHeight || 0;
     const navbarHeight = document.querySelector('nav')?.clientHeight || 0;
     const newObserver = new IntersectionObserver(observerCallback, {
-      threshold: [0.8],
+      threshold: [0.8, 0.85, 0.9, 0.95],
       rootMargin: `-${filtersElementHeight + navbarHeight}px 0px 0px 0px`,
     });
 
@@ -145,6 +153,10 @@ export function useCodeWalkthroughSteps(steps: CodeWalkthroughStep[]): Walkthrou
    * Update the URL search params with the current state of the filters and inputs
    */
   useEffect(() => {
+    if (!enableDeepLink) {
+      return;
+    }
+
     const newSearchParams = new URLSearchParams(Array.from(searchParams.entries()));
 
     if (activeStep) {

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

@@ -1,10 +1,7 @@
 import type {
-  CodeWalkthroughFileset,
   CodeWalkthroughFile,
   CodeWalkthroughStepAttr,
-  CodeWalkthroughFilter,
-  InputsMarkdocAttr,
-  TogglesMarkdocAttr,
+  CodeWalkthroughAttr,
 } from '@redocly/config';
 
 import {
@@ -23,16 +20,19 @@ export type WalkthroughState = {
 
 export function useCodeWalkthrough(
   steps: CodeWalkthroughStepAttr[],
-  attributes: {
-    filters: Record<string, CodeWalkthroughFilter>;
-    filesets: CodeWalkthroughFileset[];
-    inputs: InputsMarkdocAttr;
-    toggles: TogglesMarkdocAttr;
-  },
+  attributes: Omit<CodeWalkthroughAttr, 'steps' | 'preview'>,
 ): WalkthroughState {
-  const { filters, filesets, inputs, toggles } = attributes;
-  const stepsState = useCodeWalkthroughSteps(steps);
-  const controlsState = useCodeWalkthroughControls(filters, inputs, toggles);
+  const { filters, filesets, inputs, toggles, __idx } = attributes;
+  /* 
+    We only enable deep linking for the first CodeWalkthrough, 
+    because we don't expect more than one on the same page. 
+    Any subsequent walkthroughs have it disabled to avoid 
+    collisions/conflicts in the URL.
+  */
+  const enableDeepLink = __idx === 1;
+
+  const stepsState = useCodeWalkthroughSteps(steps, enableDeepLink);
+  const controlsState = useCodeWalkthroughControls(filters, inputs, toggles, enableDeepLink);
 
   const files: CodeWalkthroughFile[] = filesets
     .filter((fileset) => controlsState.areConditionsMet(fileset))

package/src/core/hooks/code-walkthrough/use-renderable-files.ts

@@ -0,0 +1,51 @@
+import { useMemo } from 'react';
+
+import type { CodeWalkthroughFile } from '@redocly/config';
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import {
+  getFileIconByExt,
+  removeLeadingSlash,
+  findClosestCommonDirectory,
+} from '@redocly/theme/core/utils';
+
+export type RenderableFile = CodeWalkthroughFile & {
+  FileIcon: React.FunctionComponent<IconProps>;
+  parentFolder: string;
+  isNameDuplicate: boolean;
+  inRootDir: boolean;
+};
+
+export function useRenderableFiles(files: CodeWalkthroughFile[]): RenderableFile[] {
+  return useMemo(
+    function () {
+      const filePaths = files.map(({ path }) => path);
+      const rootDir = findClosestCommonDirectory(filePaths);
+
+      const renderableFiles = files.map((file) => {
+        const FileIcon = getFileTypeIcon(file.basename);
+        const parentFolder = file.path.split('/').slice(-2, -1)[0];
+        const isNameDuplicate = files.some(
+          (_file) => file.basename === _file.basename && file.path !== _file.path,
+        );
+        const inRootDir = file.path === `${removeLeadingSlash(rootDir)}/${file.basename}`;
+
+        return {
+          ...file,
+          FileIcon,
+          inRootDir,
+          parentFolder,
+          isNameDuplicate,
+        };
+      });
+
+      return renderableFiles;
+    },
+    [files],
+  );
+}
+
+function getFileTypeIcon(basename: string) {
+  const extension = basename.split('.').pop()?.toLowerCase() || '';
+  return getFileIconByExt(extension);
+}

package/src/core/hooks/index.ts

@@ -32,3 +32,4 @@ export * from '@redocly/theme/core/hooks/code-walkthrough/use-code-walkthrough';
 export * from '@redocly/theme/core/hooks/code-walkthrough/use-code-walkthrough-steps';
 export * from '@redocly/theme/core/hooks/code-walkthrough/use-code-walkthrough-controls';
 export * from '@redocly/theme/core/hooks/code-walkthrough/use-code-panel';
+export * from '@redocly/theme/core/hooks/code-walkthrough/use-renderable-files';