@redocly/theme 0.48.0 → 0.48.2

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

@@ -27,7 +27,6 @@ exports.CodePanelHeader = CodePanelHeader;
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
 const hooks_1 = require("../../../core/hooks");
-const utils_1 = require("../../../core/utils");
 const OverflowMenuVerticalIcon_1 = require("../../../icons/OverflowMenuVerticalIcon/OverflowMenuVerticalIcon");
 const Dropdown_1 = require("../../../components/Dropdown/Dropdown");
 const DropdownMenu_1 = require("../../../components/Dropdown/DropdownMenu");
@@ -35,6 +34,7 @@ const DropdownMenuItem_1 = require("../../../components/Dropdown/DropdownMenuIte
 const DownloadIcon_1 = require("../../../icons/DownloadIcon/DownloadIcon");
 const Button_1 = require("../../../components/Button/Button");
 function CodePanelHeader({ files, handleTabSwitch, activeTabName, onDownloadCode, }) {
+    const renderableFiles = (0, hooks_1.useRenderableFiles)(files);
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     const tabRefs = (0, react_1.useRef)([]);
@@ -42,47 +42,49 @@ function CodePanelHeader({ files, handleTabSwitch, activeTabName, onDownloadCode
     const [hiddenFiles, setHiddenFiles] = (0, react_1.useState)([]);
     (0, react_1.useEffect)(() => {
         const activeTab = tabRefs.current.find((tab) => (tab === null || tab === void 0 ? void 0 : 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]);
-    (0, react_1.useEffect)(() => {
         const calculateHiddenFiles = () => {
             if (!tabsWrapperRef.current)
                 return;
             const { left: wrapperLeft, right: wrapperRight } = tabsWrapperRef.current.getBoundingClientRect();
-            const hidden = files.filter((_, i) => {
+            const hidden = [];
+            for (let i = 0; i < renderableFiles.length; i++) {
                 const tab = tabRefs.current[i];
                 if (!tab)
-                    return false;
+                    continue;
                 const { left: tabLeft, right: tabRight } = tab.getBoundingClientRect();
-                return tabLeft < wrapperLeft || tabRight > wrapperRight;
-            });
+                const visible = tabLeft > wrapperLeft && tabRight < wrapperRight;
+                if (!visible) {
+                    hidden.push(renderableFiles[i]);
+                }
+            }
             setHiddenFiles(hidden);
         };
         calculateHiddenFiles();
         window.addEventListener('resize', calculateHiddenFiles);
         return () => window.removeEventListener('resize', calculateHiddenFiles);
-    }, [files]);
-    const getFileTypeIcon = (0, react_1.useCallback)((basename) => {
-        var _a;
-        const extension = ((_a = basename.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '';
-        return (0, utils_1.getFileIconByExt)(extension);
-    }, []);
+    }, [activeTabName, files, renderableFiles]);
     return (react_1.default.createElement(CodePanelHeaderWrapper, { "data-component-name": "Markdoc/CodeWalkthrough/CodePanelHeader" },
         react_1.default.createElement(TabsWrapper, { ref: tabsWrapperRef },
-            react_1.default.createElement(Tabs, null, files.map(({ path, basename }, i) => {
-                const FileIcon = getFileTypeIcon(basename);
+            react_1.default.createElement(Tabs, null, renderableFiles.map(({ path, basename, FileIcon, parentFolder, isNameDuplicate, inRootDir }, i) => {
                 return (react_1.default.createElement(Tab, { ref: (el) => (tabRefs.current[i] = el), "data-name": path, active: path === activeTabName, key: i, onClick: () => handleTabSwitch(path) },
                     react_1.default.createElement(FileIcon, null),
-                    basename));
+                    basename,
+                    isNameDuplicate && !inRootDir ? react_1.default.createElement(Dirname, null, parentFolder) : null));
             })),
             react_1.default.createElement(Gradient, null)),
         react_1.default.createElement(ActionBar, null,
             hiddenFiles.length ? (react_1.default.createElement(Dropdown_1.Dropdown, { trigger: react_1.default.createElement(StyledOverflowMenuVerticalIcon, { size: "14px" }), alignment: "end" },
-                react_1.default.createElement(StyledDropdownMenu, null, hiddenFiles.map(({ path, basename }, i) => {
-                    const FileIcon = getFileTypeIcon(basename);
-                    return (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { active: path === activeTabName, key: i, onAction: () => handleTabSwitch(path), prefix: react_1.default.createElement(FileIcon, null), content: basename }));
+                react_1.default.createElement(StyledDropdownMenu, null, hiddenFiles.map(({ path, basename, FileIcon, isNameDuplicate, inRootDir, parentFolder }, i) => {
+                    return (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { active: path === activeTabName, key: i, onAction: () => handleTabSwitch(path), prefix: react_1.default.createElement(FileIcon, null), content: isNameDuplicate && !inRootDir ? `${parentFolder}/${basename}` : basename }));
                 })))) : null,
             react_1.default.createElement(Button_1.Button, { variant: "text", icon: react_1.default.createElement(DownloadIcon_1.DownloadIcon, null), onClick: onDownloadCode, size: "small" }, translate('codeWalkthrough.download', 'Download')))));
 }
@@ -108,13 +110,17 @@ const Gradient = styled_components_1.default.div `
 `;
 const Tabs = styled_components_1.default.div `
   display: flex;
-  overflow-x: auto;
+  overflow-x: hidden;
   padding-right: var(--spacing-base);
 
   &::-webkit-scrollbar {
     display: none;
   }
 `;
+const Dirname = styled_components_1.default.span `
+  font-size: var(--font-size-sm);
+  color: var(--text-color-description);
+`;
 const ActionBar = styled_components_1.default.div `
   display: flex;
 `;
@@ -129,7 +135,7 @@ const Tab = styled_components_1.default.button `
   gap: var(--spacing-xs);
   color: var(--text-color-secondary);
   white-space: nowrap;
-
+  scroll-margin-right: var(--spacing-base);
   ${({ active }) => active
     ? (0, styled_components_1.css) `
           color: var(--text-color-primary);

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

@@ -36,7 +36,7 @@ function CodePanelPreview({ children }) {
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
-    return (react_1.default.createElement(CodePanelPreviewWrapper, null,
+    return (react_1.default.createElement(CodePanelPreviewWrapper, { "data-component-name": "Markdoc/CodeWalkthrough/CodePanelPreview" },
         react_1.default.createElement(PreviewDropdown, { onClick: () => setIsOpen(!isOpen) },
             translate('codeWalkthrough.preview', 'Preview'),
             isOpen ? react_1.default.createElement(ChevronUpIcon_1.ChevronUpIcon, null) : react_1.default.createElement(ChevronDownIcon_1.ChevronDownIcon, null)),

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

@@ -34,7 +34,7 @@ const CopyButton_1 = require("../../../components/Buttons/CopyButton");
 function CodePanelToolbar({ file }) {
     const { getFileText } = (0, react_1.useContext)(contexts_1.CodeWalkthroughControlsStateContext);
     const fileContent = getFileText(file);
-    return (react_1.default.createElement(CodeToolbarWrapper, null,
+    return (react_1.default.createElement(CodeToolbarWrapper, { "data-component-name": "Markdoc/CodeWalkthrough/CodePanelToolbar" },
         react_1.default.createElement(CopyButton_1.CopyButton, { data: fileContent, type: "compound", variant: "secondary", size: "medium" })));
 }
 const CodeToolbarWrapper = styled_components_1.default.div `

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

@@ -71,7 +71,7 @@ function CodeStep({ id, heading, stepKey, when, unless, children, }) {
         }
         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);
+        setScrollMarginTop(filtersElementHeight + navbarHeight + 10);
         return () => {
             if (currentCompRef) {
                 unregister(currentCompRef);
@@ -79,9 +79,12 @@ function CodeStep({ id, heading, stepKey, when, unless, children, }) {
         };
     }, [activeStep, register, unregister, filtersElementRef]);
     if (!areConditionsMet({ when, unless })) {
+        if (isActive) {
+            setActiveStep(null);
+        }
         return null;
     }
-    return (react_1.default.createElement(exports.StepWrapper, { 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 },
         react_1.default.createElement(StepContent, { isActive: isActive },
             heading ? react_1.default.createElement(StepHeading, null, heading) : null,
             children)));

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

@@ -35,16 +35,16 @@ const CodeStep_1 = require("../../../markdoc/components/CodeWalkthrough/CodeStep
 const Switch_1 = require("../../../components/Switch/Switch");
 function CodeToggle(props) {
     const { id, label, description, children } = props;
-    const { getToggleState, changeToggleState } = (0, react_1.useContext)(contexts_1.CodeWalkthroughControlsStateContext);
-    const toggleState = getToggleState(id);
-    if (!(toggleState && toggleState.render)) {
+    const { getControlState, changeControlState } = (0, react_1.useContext)(contexts_1.CodeWalkthroughControlsStateContext);
+    const toggleState = getControlState(id);
+    if (!(toggleState && toggleState.render && typeof toggleState.value === 'boolean')) {
         return null;
     }
     const checked = toggleState.value;
-    return (react_1.default.createElement(exports.ToggleWrapper, null,
+    return (react_1.default.createElement(exports.ToggleWrapper, { "data-component-name": "Markdoc/CodeWalkthrough/CodeToggle" },
         react_1.default.createElement(ToggleContentWrapper, null,
             react_1.default.createElement(exports.ToggleSubtitle, null,
-                react_1.default.createElement(Switch_1.Switch, { value: checked, onChange: (newValue) => changeToggleState(id, newValue) }),
+                react_1.default.createElement(Switch_1.Switch, { value: checked, onChange: (newValue) => changeControlState(id, newValue) }),
                 react_1.default.createElement("div", null, label)),
             description ? (react_1.default.createElement("div", null, description.map((paragraph, idx) => (react_1.default.createElement(react_1.default.Fragment, { key: idx }, paragraph))))) : null),
         checked ? children : null));

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

@@ -51,13 +51,13 @@ function CodeWalkthrough(_a) {
     // This is a workaround to prevent the observer from being recreated
     const [initialSteps] = (0, react_1.useState)([...steps]);
     const { controlsState, stepsState, files, downloadAssociatedFiles } = (0, hooks_1.useCodeWalkthrough)(initialSteps, attributes);
-    const { activeFilters, getFilterState, changeFilterState } = controlsState;
+    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" },
+            react_1.default.createElement(CodeWalkthroughWrapper, { 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: getFilterState, handleFilterSelect: changeFilterState, filtersElementRef: filtersElementRef }),
+                    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 })))));
 }

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

@@ -34,12 +34,12 @@ const contexts_1 = require("../../../core/contexts");
 const DEBOUNCE_TIME = 500;
 function Input(props) {
     const { id, label, placeholder } = props;
-    const { getInputState, changeInputState } = (0, react_1.useContext)(contexts_1.CodeWalkthroughControlsStateContext);
-    const inputState = getInputState(id);
+    const { getControlState, changeControlState } = (0, react_1.useContext)(contexts_1.CodeWalkthroughControlsStateContext);
+    const inputState = getControlState(id);
     const [value, setValue] = (0, react_1.useState)((inputState === null || inputState === void 0 ? void 0 : inputState.value) || '');
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const debouncedSave = (0, react_1.useCallback)((0, lodash_debounce_1.default)((id, value) => {
-        changeInputState(id, value);
+        changeControlState(id, value);
     }, DEBOUNCE_TIME), []);
     if (!(inputState === null || inputState === void 0 ? void 0 : inputState.render)) {
         return null;
@@ -49,14 +49,15 @@ function Input(props) {
         setValue(inputValue);
         debouncedSave(id, inputValue);
     };
-    return (react_1.default.createElement(InputWrapper, null,
+    return (react_1.default.createElement(InputWrapper, { "data-component-name": "Markdoc/CodeWalkthrough/Input" },
         label && react_1.default.createElement(Label, null, label),
         react_1.default.createElement(StyledInput, { id: id, value: value, onChange: handleChange, "aria-label": label, placeholder: placeholder })));
 }
 const InputWrapper = styled_components_1.default.div `
   display: flex;
   flex-direction: column;
-  margin: var(--md-paragraph-margin);
+  margin-top: var(--spacing-base);
+  margin-bottom: var(--spacing-base);
 `;
 const Label = styled_components_1.default.p `
   color: var(--text-color-secondary);
@@ -64,6 +65,7 @@ const Label = styled_components_1.default.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_components_1.default.input `
   border: 1px solid var(--border-color-primary);

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

@@ -41,6 +41,11 @@ exports.codeWalkthrough = {
                 render: false,
                 required: false,
             },
+            __idx: {
+                type: Number,
+                render: true,
+                required: false,
+            },
         },
         slots: {
             preview: { required: false, render: true },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.48.0",
+  "version": "0.48.2",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -46,7 +46,7 @@
     "@types/jest-when": "3.5.5",
     "@types/lodash.debounce": "4.0.9",
     "@types/lodash.throttle": "4.1.9",
-    "@types/node": "18.19.3",
+    "@types/node": "22.10.5",
     "@types/react": "18.3.9",
     "@types/react-dom": "18.3.5",
     "@types/styled-components": "5.1.34",
@@ -86,7 +86,7 @@
     "timeago.js": "4.0.2",
     "i18next": "22.4.15",
     "nprogress": "0.2.0",
-    "@redocly/config": "0.20.0"
+    "@redocly/config": "0.20.2"
   },
   "scripts": {
     "watch": "tsc -p tsconfig.build.json && (concurrently \"tsc -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",

package/src/components/DatePicker/variables.ts

@@ -4,7 +4,7 @@ export const datePicker = css`
   --date-picker-nav-color: #000000;
   --date-picker-tile-bg-color: var(--color-blue-2);
   --date-picker-tile-color: var(--text-color-primary);
-  --date-picker-tile-bg-color-hover: var(--color-blue-3)
+  --date-picker-tile-bg-color-hover: var(--color-blue-3);
   --date-picker-tile-color-hover: var(--text-color-primary);
   --date-picker-input-width: var(--spacing-md);
   --date-picker-invalid-input-bg-color: var(--bg-color-raised);

package/src/components/Feedback/Mood.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useEffect } from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 import type { OptionalEmailSettings, ReasonsSettingsSchema } from '@redocly/config';
 import type { ReasonsProps } from '@redocly/theme/components/Feedback/Reasons';
@@ -161,7 +161,7 @@ export function Mood({ settings, onSubmit, className }: MoodProps): JSX.Element
     return (
       <MoodWrapper data-component-name="Feedback/Mood">
         <StyledFormMandatoryFields>
-          <Label data-translation-key="feedback.settings.submitText">
+          <Label standAlone={true} data-translation-key="feedback.settings.submitText">
             {submitText ||
               translate(
                 'feedback.settings.submitText',
@@ -178,7 +178,7 @@ export function Mood({ settings, onSubmit, className }: MoodProps): JSX.Element
     <MoodWrapper data-component-name="Feedback/Mood" className={className}>
       <StyledForm onSubmit={onSubmitMoodForm}>
         <StyledFormMandatoryFields>
-          <Label data-translation-key="feedback.settings.label">
+          <Label standAlone={true} data-translation-key="feedback.settings.label">
             {label || translate('feedback.settings.label', 'Was this helpful?')}
           </Label>
           <StyledMandatoryFieldContainer>
@@ -294,12 +294,21 @@ const MoodWrapper = styled.div`
   align-items: center;
 `;
 
-const Label = styled.h4`
+const Label = styled.h4<{ standAlone?: boolean }>`
   font-family: var(--feedback-font-family);
   font-weight: var(--font-weight-regular);
-  font-size: var(--feedback-header-font-size);
-  line-height: var(--feedback-header-line-height);
-  color: var(--feedback-header-text-color);
+  font-size: var(--feedback-font-size);
+  line-height: var(--feedback-line-height);
+  color: var(--feedback-text-color);
+
+  ${({ standAlone = false }) =>
+    standAlone &&
+    css`
+      font-size: var(--feedback-header-font-size);
+      line-height: var(--feedback-header-line-height);
+      color: var(--feedback-header-text-color);
+    `}
+
   margin: 0;
 `;
 

package/src/components/Search/SearchDialog.tsx

@@ -153,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 && (
@@ -236,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>
   );
@@ -439,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/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/contexts/CodeWalkthrough/CodeWalkthroughControlsContext.tsx

@@ -5,14 +5,8 @@ import type { WalkthroughControlsState } from '@redocly/theme/core/hooks';
 export const CodeWalkthroughControlsStateContext = createContext<WalkthroughControlsState>({
   activeFilters: [],
 
-  getToggleState: () => null,
-  changeToggleState: () => {},
-
-  getInputState: () => null,
-  changeInputState: () => {},
-
-  getFilterState: () => null,
-  changeFilterState: () => {},
+  getControlState: () => null,
+  changeControlState: () => {},
 
   getFileText: () => '',
   areConditionsMet: () => false,