@redocly/theme 0.46.5 → 0.47.1

package/lib/components/Buttons/CopyButton.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import type { TooltipProps } from '../../components/Tooltip/Tooltip';
-import type { ControlItemType } from '../../components/CodeBlock/CodeBlockControls';
+import type { ButtonProps } from '../../components/Button/Button';
 export type CopyButtonProps = {
     data: unknown;
-    type?: ControlItemType;
+    type?: 'icon' | 'text' | 'compound';
     toasterPlacement?: TooltipProps['placement'];
     toasterText?: string;
     toasterDuration?: number;
@@ -11,6 +11,11 @@ export type CopyButtonProps = {
     onCopyClick?: (e: React.MouseEvent<HTMLElement>) => void;
     dataTestId?: string;
     className?: string;
-    variant?: string;
+    variant?: ButtonProps['variant'];
+    size?: ButtonProps['size'];
+    disabled?: ButtonProps['disabled'];
+    fullWidth?: ButtonProps['fullWidth'];
+    tone?: ButtonProps['tone'];
+    extraClass?: ButtonProps['extraClass'];
 };
 export declare const CopyButton: React.NamedExoticComponent<CopyButtonProps>;

package/lib/components/Buttons/CopyButton.js

@@ -30,7 +30,7 @@ const hooks_1 = require("../../core/hooks");
 const Button_1 = require("../../components/Button/Button");
 const CopyIcon_1 = require("../../icons/CopyIcon/CopyIcon");
 const Tooltip_1 = require("../../components/Tooltip/Tooltip");
-function CopyButtonComponent({ data, type = 'icon', toasterPlacement = 'top', toasterText, toasterDuration, buttonText, onCopyClick, dataTestId = 'copy-button', className, variant = 'text', }) {
+function CopyButtonComponent({ data, type = 'icon', toasterPlacement = 'top', toasterText, toasterDuration, buttonText, onCopyClick, dataTestId = 'copy-button', className, variant = 'text', size = 'small', disabled, fullWidth, tone, extraClass, }) {
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const tooltip = (0, hooks_1.useControl)();
     const { translate } = useTranslate();
@@ -46,8 +46,9 @@ function CopyButtonComponent({ data, type = 'icon', toasterPlacement = 'top', to
         showTooltip(duration);
         onCopyClick === null || onCopyClick === void 0 ? void 0 : onCopyClick(e);
     };
-    return (react_1.default.createElement(Tooltip_1.Tooltip, { className: `copy-button ${className ? className : ''}`, tip: translate('codeSnippet.copy.buttonText', toasterText || 'Copied!'), isOpen: tooltip.isOpened, placement: toasterPlacement },
-        react_1.default.createElement(Button_1.Button, { "data-component-name": "Buttons/CopyButton", onClick: (e) => copy(e, toasterDuration), "data-testid": dataTestId, icon: type === 'icon' ? react_1.default.createElement(CopyIcon_1.CopyIcon, null) : undefined, size: "small", variant: variant }, type !== 'icon' && translate('codeSnippet.copy.toasterText', buttonText || 'Copy'))));
+    return (react_1.default.createElement(Tooltip_1.Tooltip, { className: `copy-button ${className ? className : ''}`, tip: translate('codeSnippet.copy.buttonText', toasterText || 'Copied!'), isOpen: tooltip.isOpened, placement: toasterPlacement, width: "fit-content" },
+        react_1.default.createElement(Button_1.Button, { "data-component-name": "Buttons/CopyButton", onClick: (e) => copy(e, toasterDuration), "data-testid": dataTestId, icon: type === 'icon' || type === 'compound' ? react_1.default.createElement(CopyIcon_1.CopyIcon, null) : undefined, size: size, variant: variant, disabled: disabled, fullWidth: fullWidth, tone: tone, extraClass: extraClass }, (type === 'text' || type === 'compound') &&
+            translate('codeSnippet.copy.toasterText', buttonText || 'Copy'))));
 }
 exports.CopyButton = (0, react_1.memo)(CopyButtonComponent);
 //# sourceMappingURL=CopyButton.js.map

package/lib/components/Image/Image.d.ts

@@ -1,7 +1,12 @@
+import React from 'react';
 export type ImageProps = {
     src?: string;
     srcSet?: string;
     alt?: string;
     className?: string;
+    width?: string | number;
+    height?: string | number;
+    border?: string;
+    style?: React.CSSProperties | string;
 };
 export declare function Image(props: ImageProps): JSX.Element;

package/lib/components/Image/Image.js

@@ -8,11 +8,12 @@ const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const utils_1 = require("../../core/utils");
 function Image(props) {
-    const { src, srcSet, alt, className } = props;
+    const { src, srcSet, alt, className, width, height, border, style } = props;
     const parsedSourceSetMap = react_1.default.useMemo(() => {
         return srcSet ? (0, utils_1.parseSrcSet)(srcSet) : new Map();
     }, [srcSet]);
-    return (react_1.default.createElement(react_1.default.Fragment, null, src ? (react_1.default.createElement("img", { src: src, alt: alt, className: className })) : (Array.from(parsedSourceSetMap).map(([key, value]) => (react_1.default.createElement(ColorModeAwareImage, { key: key, colorMode: key, src: value, alt: alt, className: className }))))));
+    const combinedStyle = Object.assign(Object.assign({}, (border && { border })), (typeof style === 'string' ? { cssText: style } : style));
+    return (react_1.default.createElement(react_1.default.Fragment, null, src ? (react_1.default.createElement("img", { src: src, alt: alt, className: className, width: width, height: height, style: combinedStyle })) : (Array.from(parsedSourceSetMap).map(([key, value]) => (react_1.default.createElement(ColorModeAwareImage, { key: key, colorMode: key, src: value, alt: alt, className: className, width: width, height: height, style: combinedStyle }))))));
 }
 const ColorModeAwareImage = styled_components_1.default.img `
   html:not(.${(props) => props.colorMode}) && {

package/lib/components/Search/SearchAiResponse.js

@@ -30,7 +30,7 @@ function SearchAiResponse(props) {
                     resources.length,
                     " ",
                     translate('search.ai.resourcesFound', 'resources found')),
-                react_1.default.createElement(ResourceTags, null, resources.map((resource, idx) => (react_1.default.createElement(Link_1.Link, { key: idx, to: resource.url },
+                react_1.default.createElement(ResourceTags, null, resources.map((resource, idx) => (react_1.default.createElement(Link_1.Link, { key: idx, to: resource.url, target: "_blank" },
                     react_1.default.createElement(ResourceTag, { borderless: true, icon: react_1.default.createElement(DocumentIcon_1.DocumentIcon, { color: "--search-ai-resource-tag-icon-color" }) }, resource.title))))))) : null)));
 }
 const ResponseWrapper = styled_components_1.default.div `

package/lib/components/Search/SearchDialog.js

@@ -107,17 +107,19 @@ function SearchDialog({ onClose, className }) {
                         react_1.default.createElement(CloseIcon_1.CloseIcon, { onClick: () => setProduct(undefined), color: "--icon-color-additional" })))),
                 react_1.default.createElement(SearchInput_1.SearchInput, { value: query, onChange: setQuery, placeholder: mode === 'search'
                         ? translate('search.label', 'Search docs...')
-                        : translate('search.ai.label', 'Ask a follow up question'), isLoading: isSearchLoading, showReturnButton: mode === 'ai-dialog', onReturn: () => setMode('search'), onSubmit: mode === 'ai-dialog'
+                        : translate('search.ai.label', 'Ask AI assistant'), isLoading: isSearchLoading, showReturnButton: mode === 'ai-dialog', onReturn: () => setMode('search'), onSubmit: mode === 'ai-dialog'
                         ? () => {
                             setQuery('');
                             aiSearch.askQuestion(query);
                         }
                         : undefined, "data-translation-key": mode === 'search' ? 'search.label' : 'search.ai.label' }),
                 showHeaderButtons && (react_1.default.createElement(SearchHeaderButtons, null,
-                    showAiSearchButton ? (react_1.default.createElement(SearchAiButton, { disabled: !query.trim(), icon: react_1.default.createElement(AiStarsIcon_1.AiStarsIcon, null), onClick: () => {
+                    showAiSearchButton ? (react_1.default.createElement(SearchAiButton, { icon: react_1.default.createElement(AiStarsIcon_1.AiStarsIcon, null), onClick: () => {
                             setMode('ai-dialog');
-                            setQuery('');
-                            aiSearch.askQuestion(query);
+                            if (query.trim()) {
+                                setQuery('');
+                                aiSearch.askQuestion(query);
+                            }
                         } }, translate('search.aiButton', 'Search with AI'))) : null,
                     showSearchFilterButton && (react_1.default.createElement(SearchFilterToggleButton, { icon: react_1.default.createElement(SettingsIcon_1.SettingsIcon, null), onClick: onFilterToggle }))))),
             react_1.default.createElement(SearchDialogBody, null, mode === 'search' ? (react_1.default.createElement(react_1.default.Fragment, null,

package/lib/components/StatusCode/StatusCode.js

@@ -20,20 +20,17 @@ exports.StatusCode = styled_components_1.default.button.attrs({ 'data-component-
     width: var(--status-code-width);
     border: var(--status-code-border);
     background-color: ${({ status }) => {
-    if (Math.floor(Number(status) / 100) === 2) {
-        return 'var(--status-code-200-bg-color)';
-    }
-    else if (Math.floor(Number(status) / 100) === 4) {
-        return 'var(--status-code-400-bg-color)';
-    }
-    else if (Math.floor(Number(status) / 100) === 5) {
-        return 'var(--status-code-500-bg-color)';
-    }
-    else if (Math.floor(Number(status) / 100) === 3) {
-        return 'var(--status-code-300-bg-color)';
-    }
-    else {
-        return 'var(--status-code-100-bg-color)';
+    switch (true) {
+        case status.startsWith('2'):
+            return 'var(--status-code-200-bg-color)';
+        case status.startsWith('3'):
+            return 'var(--status-code-300-bg-color)';
+        case status.startsWith('4'):
+            return 'var(--status-code-400-bg-color)';
+        case status.startsWith('5'):
+            return 'var(--status-code-500-bg-color)';
+        default:
+            return 'var(--status-code-100-bg-color)';
     }
 }}
 `;

package/lib/core/constants/code-walkthrough.d.ts

@@ -0,0 +1 @@
+export declare const ACTIVE_STEP_QUERY_PARAM = "__step";

package/lib/core/constants/code-walkthrough.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ACTIVE_STEP_QUERY_PARAM = void 0;
+exports.ACTIVE_STEP_QUERY_PARAM = '__step';
+//# sourceMappingURL=code-walkthrough.js.map

package/lib/core/constants/index.d.ts

@@ -1,2 +1,3 @@
 export * from '../../core/constants/common';
 export * from '../../core/constants/environments';
+export * from '../../core/constants/code-walkthrough';

package/lib/core/constants/index.js

@@ -16,4 +16,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("../../core/constants/common"), exports);
 __exportStar(require("../../core/constants/environments"), exports);
+__exportStar(require("../../core/constants/code-walkthrough"), exports);
 //# sourceMappingURL=index.js.map

package/lib/core/contexts/CodeWalkthrough/CodeWalkthroughControlsContext.d.ts

@@ -0,0 +1,2 @@
+import type { WalkthroughControlsState } from '../../../core/hooks';
+export declare const CodeWalkthroughControlsStateContext: import("react").Context<WalkthroughControlsState>;

package/lib/core/contexts/CodeWalkthrough/CodeWalkthroughControlsContext.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CodeWalkthroughControlsStateContext = void 0;
+const react_1 = require("react");
+exports.CodeWalkthroughControlsStateContext = (0, react_1.createContext)({
+    activeFilters: [],
+    getToggleState: () => null,
+    changeToggleState: () => { },
+    getInputState: () => null,
+    changeInputState: () => { },
+    getFilterState: () => null,
+    changeFilterState: () => { },
+    getFileText: () => '',
+    areConditionsMet: () => false,
+    handleDownloadCode: () => Promise.resolve(),
+    populateInputsWithValue: (node) => node,
+});
+//# sourceMappingURL=CodeWalkthroughControlsContext.js.map

package/lib/core/contexts/CodeWalkthrough/CodeWalkthroughStepsContext.d.ts

@@ -0,0 +1,2 @@
+import type { WalkthroughStepsState } from '../../../core/hooks';
+export declare const CodeWalkthroughStepsContext: import("react").Context<WalkthroughStepsState>;

package/lib/core/contexts/CodeWalkthrough/CodeWalkthroughStepsContext.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CodeWalkthroughStepsContext = void 0;
+const react_1 = require("react");
+exports.CodeWalkthroughStepsContext = (0, react_1.createContext)({
+    activeStep: null,
+    setActiveStep: () => { },
+    register: () => { },
+    unregister: () => { },
+});
+//# sourceMappingURL=CodeWalkthroughStepsContext.js.map

package/lib/core/contexts/index.d.ts

@@ -1 +1,3 @@
 export * from '../../core/contexts/ThemeDataContext';
+export * from '../../core/contexts/CodeWalkthrough/CodeWalkthroughControlsContext';
+export * from '../../core/contexts/CodeWalkthrough/CodeWalkthroughStepsContext';

package/lib/core/contexts/index.js

@@ -15,4 +15,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("../../core/contexts/ThemeDataContext"), exports);
+__exportStar(require("../../core/contexts/CodeWalkthrough/CodeWalkthroughControlsContext"), exports);
+__exportStar(require("../../core/contexts/CodeWalkthrough/CodeWalkthroughStepsContext"), exports);
 //# sourceMappingURL=index.js.map

package/lib/core/hooks/code-walkthrough/__mocks__/MockIntersectionObserver.d.ts

@@ -0,0 +1,10 @@
+export declare class MockIntersectionObserver {
+    readonly root: Element | Document | null;
+    readonly rootMargin: string;
+    readonly thresholds: ReadonlyArray<number>;
+    observe: (target: HTMLElement) => void;
+    unobserve: (target: HTMLElement) => void;
+    disconnect: () => void;
+    constructor(callback: IntersectionObserverCallback, options?: IntersectionObserverInit);
+    takeRecords(): any[];
+}

package/lib/core/hooks/code-walkthrough/__mocks__/MockIntersectionObserver.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MockIntersectionObserver = void 0;
+class MockIntersectionObserver {
+    // @ts-ignore
+    constructor(callback, options) {
+        Object.defineProperty(this, "root", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "rootMargin", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "thresholds", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "observe", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "unobserve", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "disconnect", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.root = null;
+        this.rootMargin = '0px';
+        this.thresholds = [1];
+        this.observe = jest.fn;
+        this.unobserve = jest.fn;
+        this.disconnect = jest.fn;
+    }
+    takeRecords() {
+        return [];
+    }
+}
+exports.MockIntersectionObserver = MockIntersectionObserver;
+//# sourceMappingURL=MockIntersectionObserver.js.map

package/lib/core/hooks/code-walkthrough/use-code-panel.d.ts

@@ -0,0 +1,6 @@
+import type { CodeWalkthroughFile } from '@redocly/config';
+export declare function useCodePanel(files: CodeWalkthroughFile[]): {
+    readonly activeFile: CodeWalkthroughFile;
+    readonly handleTabSwitch: (name: string) => void;
+    readonly highlightedCode: string;
+};

package/lib/core/hooks/code-walkthrough/use-code-panel.js

@@ -0,0 +1,93 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCodePanel = useCodePanel;
+const react_1 = require("react");
+const contexts_1 = require("../../../core/contexts");
+const hooks_1 = require("../../../core/hooks");
+const ACTIVE_FILE_MOCK = {
+    content: [],
+    path: '',
+    basename: '',
+    metadata: {},
+    language: '',
+};
+function useCodePanel(files) {
+    const { activeStep } = (0, react_1.useContext)(contexts_1.CodeWalkthroughStepsContext);
+    const { areConditionsMet, populateInputsWithValue } = (0, react_1.useContext)(contexts_1.CodeWalkthroughControlsStateContext);
+    const { useCodeHighlight } = (0, hooks_1.useThemeHooks)();
+    const { highlight } = useCodeHighlight();
+    const findFileIndexByName = (0, react_1.useCallback)((name) => {
+        return files.findIndex((file) => file.path === name);
+    }, [files]);
+    const findFileIndexByStepId = (0, react_1.useCallback)((id) => files.findIndex((file) => file.metadata.steps.includes(id)), [files]);
+    const activeStepFileIndex = activeStep ? findFileIndexByStepId(activeStep) : 0;
+    const initialActiveFileIndex = activeStepFileIndex !== -1 ? activeStepFileIndex : 0;
+    const [activeFileIndex, setActiveFileIndex] = (0, react_1.useState)(initialActiveFileIndex);
+    (0, react_1.useEffect)(() => {
+        setActiveFileIndex(initialActiveFileIndex);
+    }, [initialActiveFileIndex, activeStep, files]);
+    const handleTabSwitch = (0, react_1.useCallback)((name) => {
+        const index = findFileIndexByName(name);
+        if (index !== -1) {
+            setActiveFileIndex(index);
+        }
+    }, [findFileIndexByName]);
+    const activeFile = files[activeFileIndex] ||
+        // Fallback to default. Needed when switching from language with more files to a language with less files
+        files[initialActiveFileIndex] ||
+        // Final fallback for dev mode when no files were added yet
+        ACTIVE_FILE_MOCK;
+    const highlightedCode = (0, react_1.useMemo)(() => {
+        const { highlightedLines, code, isWholeFileSelected } = getRenderableCode(activeFile, activeStep, areConditionsMet, populateInputsWithValue);
+        return highlight(code, activeFile.language, {
+            withLineNumbers: true,
+            // Shiki transformerMetaHighlight meta to highlight lines
+            // If the whole file is selected for a step, do not apply highlighting
+            highlight: isWholeFileSelected ? '' : `{${Array.from(highlightedLines).join(',')}}`,
+            customTransformer: {
+                // Add greyed-out class to lines that are not highlighted
+                line(hast, number) {
+                    if (!highlightedLines.has(number)) {
+                        this.addClassToHast(hast, 'greyed-out');
+                    }
+                },
+            },
+        });
+    }, [activeFile, activeStep, highlight, areConditionsMet, populateInputsWithValue]);
+    return { activeFile, handleTabSwitch, highlightedCode };
+}
+function getRenderableCode(activeFile, activeStep, areConditionsMet, populateInputsWithValue) {
+    const codeLines = activeFile.content.flatMap((node) => getCodeLinesFromNode(node, activeStep, areConditionsMet, populateInputsWithValue));
+    const codeLinesContent = [];
+    const highlightedLines = new Set();
+    codeLines.forEach(({ lineContent, highlighted }, idx) => {
+        codeLinesContent.push(lineContent);
+        if (highlighted) {
+            highlightedLines.add(idx + 1);
+        }
+    });
+    return {
+        highlightedLines,
+        code: codeLinesContent.join('\n'),
+        isWholeFileSelected: highlightedLines.size === codeLinesContent.length,
+    };
+}
+/**
+ * Convert code node to code line objects with content to render and their highlighted status
+ */
+function getCodeLinesFromNode(node, activeStep, areConditionsMet, populateInputsWithValue, parentHighlighted = false) {
+    if (typeof node === 'string') {
+        const replacedNode = populateInputsWithValue(node);
+        return [{ lineContent: replacedNode, highlighted: parentHighlighted }];
+    }
+    else {
+        const shouldRenderChunk = areConditionsMet(node.condition);
+        const isHighlighted = activeStep != null &&
+            node.condition.steps.length > 0 &&
+            node.condition.steps.includes(activeStep);
+        return shouldRenderChunk
+            ? node.children.flatMap((child) => getCodeLinesFromNode(child, activeStep, areConditionsMet, populateInputsWithValue, isHighlighted))
+            : [];
+    }
+}
+//# sourceMappingURL=use-code-panel.js.map

package/lib/core/hooks/code-walkthrough/use-code-walkthrough-controls.d.ts

@@ -0,0 +1,22 @@
+import type { CodeWalkthroughFile, CodeWalkthroughFilter, InputsMarkdocAttr, TogglesMarkdocAttr, CodeWalkthroughFilterItem, ControlState, ControlTypeValue, ControlType, CodeWalkthroughConditionsObject } from '@redocly/config';
+export type getState<T extends ControlType> = (id: string) => Omit<ControlState<T>, 'type'> | null;
+export type changeState<T extends ControlType> = (id: string, value: ControlTypeValue<T>) => void;
+export type ActiveFilter = {
+    id: string;
+    label?: string;
+    items: CodeWalkthroughFilterItem[];
+};
+export type WalkthroughControlsState = {
+    activeFilters: ActiveFilter[];
+    getToggleState: getState<'toggle'>;
+    changeToggleState: changeState<'toggle'>;
+    getInputState: getState<'input'>;
+    changeInputState: changeState<'input'>;
+    getFilterState: getState<'filter'>;
+    changeFilterState: changeState<'filter'>;
+    areConditionsMet: (conditions: CodeWalkthroughConditionsObject) => boolean;
+    handleDownloadCode: (files: CodeWalkthroughFile[]) => Promise<void>;
+    getFileText: (file: CodeWalkthroughFile) => string;
+    populateInputsWithValue: (node: string) => string;
+};
+export declare function useCodeWalkthroughControls(filters: Record<string, CodeWalkthroughFilter>, inputs: InputsMarkdocAttr, toggles: TogglesMarkdocAttr): WalkthroughControlsState;

package/lib/core/hooks/code-walkthrough/use-code-walkthrough-controls.js

@@ -0,0 +1,183 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCodeWalkthroughControls = useCodeWalkthroughControls;
+const react_1 = require("react");
+const react_router_dom_1 = require("react-router-dom");
+const utils_1 = require("../../../core/utils");
+const defaultControlsValues = {
+    input: '',
+    toggle: false,
+    filter: '',
+};
+function useCodeWalkthroughControls(filters, inputs, toggles) {
+    const location = (0, react_router_dom_1.useLocation)();
+    const navigate = (0, react_router_dom_1.useNavigate)();
+    const searchParams = (0, react_1.useMemo)(() => new URLSearchParams(location.search), [location.search]);
+    const [togglesState, setTogglesState] = (0, react_1.useState)(() => {
+        const initialState = {};
+        for (const [id, toggle] of Object.entries(toggles)) {
+            initialState[id] = Object.assign(Object.assign({}, toggle), { render: true, type: 'toggle', value: searchParams.get(id) === 'true' });
+        }
+        return initialState;
+    });
+    const changeToggleState = (toggleId, checked) => {
+        setTogglesState((prev) => {
+            const toggle = prev[toggleId];
+            if (toggle) {
+                return Object.assign(Object.assign({}, prev), { [toggleId]: Object.assign(Object.assign({}, toggle), { value: checked }) });
+            }
+            else {
+                return prev;
+            }
+        });
+    };
+    const getToggleState = (toggleId) => {
+        const toggleState = togglesState[toggleId];
+        if (toggleState) {
+            return {
+                render: toggleState.render,
+                value: toggleState.value,
+            };
+        }
+        else {
+            return null;
+        }
+    };
+    const [inputsState, setInputsState] = (0, react_1.useState)(() => {
+        const initialState = {};
+        for (const [id, input] of Object.entries(inputs)) {
+            initialState[id] = Object.assign(Object.assign({}, input), { render: true, type: 'input', value: searchParams.get(id) || input.value });
+        }
+        return initialState;
+    });
+    const changeInputState = (inputId, value) => {
+        setInputsState((prev) => {
+            const input = prev[inputId];
+            if (input) {
+                return Object.assign(Object.assign({}, prev), { [inputId]: Object.assign(Object.assign({}, input), { value }) });
+            }
+            else {
+                return prev;
+            }
+        });
+    };
+    const getInputState = (inputId) => {
+        const inputState = inputsState[inputId];
+        if (inputState) {
+            return {
+                render: inputState.render,
+                value: inputState.value,
+            };
+        }
+        else {
+            return null;
+        }
+    };
+    const [filtersState, setFiltersState] = (0, react_1.useState)(() => {
+        var _a, _b;
+        const initialState = {};
+        for (const [id, filter] of Object.entries(filters)) {
+            initialState[id] = Object.assign(Object.assign({}, filter), { render: true, type: 'filter', value: searchParams.get(id) || ((_b = (_a = filter === null || filter === void 0 ? void 0 : filter.items) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.value) || '' });
+        }
+        return initialState;
+    });
+    const changeFilterState = (filterId, value) => {
+        setFiltersState((prev) => {
+            const filter = prev[filterId];
+            if (filter) {
+                return Object.assign(Object.assign({}, prev), { [filterId]: Object.assign(Object.assign({}, filter), { value }) });
+            }
+            else {
+                return prev;
+            }
+        });
+    };
+    const getFilterState = (filterId) => {
+        const filterState = filtersState[filterId];
+        if (filterState) {
+            return {
+                render: filterState.render,
+                value: filterState.value,
+            };
+        }
+        else {
+            return null;
+        }
+    };
+    const state = Object.assign(Object.assign(Object.assign({}, filtersState), togglesState), inputsState);
+    const walkthroughContext = (0, react_1.useMemo)(() => {
+        const areConditionsMet = (conditions) => (0, utils_1.matchCodeWalkthroughConditions)(conditions, state);
+        for (const [id, element] of Object.entries(state)) {
+            if (element && !areConditionsMet(element)) {
+                state[id].render = false;
+                state[id].value = defaultControlsValues[element.type];
+            }
+        }
+        const activeFilters = [];
+        for (const [id, filter] of Object.entries(filters)) {
+            if (!filtersState[id].render) {
+                continue;
+            }
+            // code-walk-todo: need to check if we have a default fallback
+            const items = Array.isArray(filter === null || filter === void 0 ? void 0 : filter.items) ? filter.items : [];
+            const activeItems = items.filter((item) => areConditionsMet(item));
+            if (activeItems.length === 0) {
+                filtersState[id].render = false;
+                filtersState[id].value = defaultControlsValues['filter'];
+                continue;
+            }
+            const currentValue = filtersState[id].value;
+            if (currentValue) {
+                const isValueInActiveItems = activeItems.findIndex(({ value }) => value === currentValue) !== -1;
+                filtersState[id].value = isValueInActiveItems ? currentValue : activeItems[0].value;
+            }
+            else {
+                filtersState[id].value = activeItems[0].value;
+            }
+            activeFilters.push({
+                id,
+                label: filter.label,
+                items: activeItems,
+            });
+        }
+        const handleDownloadCode = (files) => (0, utils_1.downloadCodeWalkthrough)(files, state, inputsState);
+        const getFileText = (file) => (0, utils_1.getCodeWalkthroughFileText)(file, state, inputsState);
+        const populateInputsWithValue = (node) => (0, utils_1.replaceInputsWithValue)(node, inputsState);
+        return {
+            activeFilters,
+            areConditionsMet,
+            handleDownloadCode,
+            getFileText,
+            populateInputsWithValue,
+        };
+        // Ignore state in dependency array as it's simply a combination of toggles, filters and inputs.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [filters, filtersState, togglesState, inputsState]);
+    /**
+     * Update the URL search params with the current state of the filters and inputs
+     */
+    (0, react_1.useEffect)(() => {
+        const newSearchParams = new URLSearchParams(Array.from(searchParams.entries()));
+        for (const [id, { value }] of Object.entries(state)) {
+            if (value) {
+                newSearchParams.set(id, value.toString());
+            }
+            else {
+                newSearchParams.delete(id);
+            }
+        }
+        const newSearch = newSearchParams.toString();
+        if (newSearch === location.search.substring(1))
+            return;
+        navigate({ search: newSearch });
+        // Ignore searchParams in dependency array to avoid infinite re-renders
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [filters, filtersState, togglesState, inputsState, navigate, location, state]);
+    return Object.assign({ getInputState,
+        changeInputState,
+        getToggleState,
+        changeToggleState,
+        getFilterState,
+        changeFilterState }, walkthroughContext);
+}
+//# sourceMappingURL=use-code-walkthrough-controls.js.map

package/lib/core/hooks/code-walkthrough/use-code-walkthrough-steps.d.ts

@@ -0,0 +1,16 @@
+import type { CodeWalkthroughStepAttr } from '@redocly/config';
+type ActiveStep = string | null;
+type CodeWalkthroughStep = CodeWalkthroughStepAttr & {
+    active?: boolean;
+    compRef?: HTMLElement;
+};
+export type WalkthroughStepsState = {
+    activeStep: ActiveStep;
+    setActiveStep: (stepId: ActiveStep) => void;
+    register: (element: HTMLElement) => void;
+    unregister: (element: HTMLElement) => void;
+    lockObserver?: React.MutableRefObject<boolean>;
+    filtersElementRef?: React.RefObject<HTMLDivElement>;
+};
+export declare function useCodeWalkthroughSteps(steps: CodeWalkthroughStep[]): WalkthroughStepsState;
+export {};