@redocly/theme 0.48.0 → 0.48.2

package/lib/components/DatePicker/variables.js

@@ -6,7 +6,7 @@ exports.datePicker = (0, styled_components_1.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/lib/components/Feedback/Mood.js

@@ -22,15 +22,12 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MOOD_STATES = void 0;
 exports.Mood = Mood;
 const React = __importStar(require("react"));
 const react_1 = require("react");
-const styled_components_1 = __importDefault(require("styled-components"));
+const styled_components_1 = __importStar(require("styled-components"));
 const Reasons_1 = require("../../components/Feedback/Reasons");
 const hooks_1 = require("../../core/hooks");
 const RadioCheckButtonIcon_1 = require("../../icons/RadioCheckButtonIcon/RadioCheckButtonIcon");
@@ -134,14 +131,14 @@ function Mood({ settings, onSubmit, className }) {
     if (isSubmitted) {
         return (React.createElement(MoodWrapper, { "data-component-name": "Feedback/Mood" },
             React.createElement(StyledFormMandatoryFields, null,
-                React.createElement(Label, { "data-translation-key": "feedback.settings.submitText" }, submitText ||
+                React.createElement(Label, { standAlone: true, "data-translation-key": "feedback.settings.submitText" }, submitText ||
                     translate('feedback.settings.submitText', 'Thank you for helping improve our documentation!')),
                 React.createElement(RadioCheckButtonIcon_1.RadioCheckButtonIcon, null))));
     }
     return (React.createElement(MoodWrapper, { "data-component-name": "Feedback/Mood", className: className },
         React.createElement(StyledForm, { onSubmit: onSubmitMoodForm },
             React.createElement(StyledFormMandatoryFields, null,
-                React.createElement(Label, { "data-translation-key": "feedback.settings.label" }, label || translate('feedback.settings.label', 'Was this helpful?')),
+                React.createElement(Label, { standAlone: true, "data-translation-key": "feedback.settings.label" }, label || translate('feedback.settings.label', 'Was this helpful?')),
                 React.createElement(StyledMandatoryFieldContainer, null,
                     React.createElement(Button_1.Button, { "aria-label": MOOD_STATES.DISSATISFIED, type: "button", size: "medium", variant: score === MOOD_STATES.DISSATISFIED ? 'primary' : 'secondary', tone: score === MOOD_STATES.DISSATISFIED ? 'danger' : 'default', onClick: () => {
                             setScore(MOOD_STATES.DISSATISFIED);
@@ -189,9 +186,17 @@ const MoodWrapper = styled_components_1.default.div `
 const Label = styled_components_1.default.h4 `
   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 &&
+    (0, styled_components_1.css) `
+      font-size: var(--feedback-header-font-size);
+      line-height: var(--feedback-header-line-height);
+      color: var(--feedback-header-text-color);
+    `}
+
   margin: 0;
 `;
 const ButtonsContainer = styled_components_1.default.div `

package/lib/components/Search/SearchDialog.js

@@ -120,7 +120,7 @@ function SearchDialog({ onClose, className }) {
                                 setQuery('');
                                 aiSearch.askQuestion(query);
                             }
-                        } }, translate('search.aiButton', 'Search with AI'))) : null,
+                        } }, translate('search.ai.button', '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,
                 react_1.default.createElement(SearchDialogBodyMainView, null,
@@ -139,7 +139,7 @@ function SearchDialog({ onClose, className }) {
                         react_1.default.createElement(SearchSuggestedPages_1.SearchSuggestedPages, null)))),
                 advancedSearch && mode === 'search' && isFilterOpen && (react_1.default.createElement(SearchDialogBodyFilterView, null,
                     react_1.default.createElement(SearchFilter_1.SearchFilter, { facets: facets, filter: filter, query: query, quickFilterFields: [groupField], onFilterChange: onFilterChange, onFilterReset: onFilterReset, onFacetReset: onFacetReset }))))) : (react_1.default.createElement(SearchAiResponse_1.SearchAiResponse, { question: aiSearch.question, isGeneratingResponse: aiSearch.isGeneratingResponse, response: aiSearch.response, resources: aiSearch.resources }))),
-            mode === 'search' && (react_1.default.createElement(SearchDialogFooter, null,
+            react_1.default.createElement(SearchDialogFooter, null, mode === 'ai-dialog' ? (react_1.default.createElement(AiDisclaimer, null, translate('search.ai.disclaimer', 'AI search might provide incomplete or incorrect results. Verify important information.'))) : (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(SearchShortcuts, null,
                     react_1.default.createElement(SearchShortcut_1.SearchShortcut, { "data-translation-key": "search.keys.navigate", combination: "Tab", text: translate('search.keys.navigate', 'to navigate') }),
                     react_1.default.createElement(SearchShortcut_1.SearchShortcut, { "data-translation-key": "search.keys.select", combination: "\u23CE", text: translate('search.keys.select', 'to select') }),
@@ -147,7 +147,7 @@ function SearchDialog({ onClose, className }) {
                 isSearchLoading && (react_1.default.createElement(SearchLoading, null,
                     react_1.default.createElement(SpinnerLoader_1.SpinnerLoader, { size: "16px", color: "var(--search-input-icon-color)" }),
                     translate('search.loading', 'Loading...'))),
-                react_1.default.createElement(SearchCancelButton, { "data-translation-key": "search.cancel", variant: "secondary", size: "small", onClick: onClose }, translate('search.cancel', 'Cancel')))))));
+                react_1.default.createElement(SearchCancelButton, { "data-translation-key": "search.cancel", variant: "secondary", size: "small", onClick: onClose }, translate('search.cancel', 'Cancel'))))))));
 }
 const SearchOverlay = styled_components_1.default.div `
   position: fixed;
@@ -296,4 +296,10 @@ const SearchHeaderButtons = styled_components_1.default.div `
   padding-left: var(--search-header-buttons-padding-left);
   border-left: var(--search-header-buttons-border-left);
 `;
+const AiDisclaimer = styled_components_1.default.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;
+`;
 //# sourceMappingURL=SearchDialog.js.map

package/lib/components/Search/variables.js

@@ -178,6 +178,10 @@ exports.search = (0, styled_components_1.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
 `;
 //# sourceMappingURL=variables.js.map

package/lib/components/Segmented/Segmented.d.ts

@@ -1,4 +1,4 @@
-import type { ReactElement } from 'react';
+import type { ForwardedRef, ReactElement } from 'react';
 import type { SelectOption } from '../../core/types/select';
 export type SegmentedProps<T> = {
     options: SelectOption<T>[];
@@ -7,6 +7,6 @@ export type SegmentedProps<T> = {
     className?: string;
     size?: 'regular' | 'small';
 };
-declare function SegmentedComponent<T>({ options, onChange, value, className, size, }: SegmentedProps<T>): ReactElement;
-export declare const Segmented: typeof SegmentedComponent;
-export {};
+export declare const Segmented: <T>(props: SegmentedProps<T> & {
+    ref?: ForwardedRef<HTMLDivElement>;
+}) => ReactElement;

package/lib/components/Segmented/Segmented.js

@@ -22,18 +22,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Segmented = void 0;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
 const typedMemo_1 = require("../../core/hoc/typedMemo");
-function SegmentedComponent({ options, onChange, value, className = '', size = 'regular', }) {
-    return (react_1.default.createElement(SegmentedGroup, { "data-component-name": "Segmented/Segmented", className: `tag-grey ${size} ${className}`, role: "tablist" }, options.map((opt) => (react_1.default.createElement(SegmentedItem, { key: opt.label, role: "tab", title: opt.label, onClick: () => onChange(opt), "$isActive": value == opt.value, "$size": size }, opt.label)))));
+function SegmentedComponent({ options, onChange, value, className = '', size = 'regular' }, ref) {
+    return (react_1.default.createElement(SegmentedGroup, { ref: ref, "data-component-name": "Segmented/Segmented", className: `tag-grey ${size} ${className}`, role: "tablist" }, options.map((opt) => (react_1.default.createElement(SegmentedItem, { key: opt.label, role: "tab", title: opt.label, onClick: () => onChange(opt), "$isActive": value == opt.value, "$size": size }, opt.label)))));
 }
-exports.Segmented = (0, typedMemo_1.typedMemo)(SegmentedComponent);
+exports.Segmented = (0, typedMemo_1.typedMemo)((0, react_1.forwardRef)(SegmentedComponent));
 const SegmentedGroup = styled_components_1.default.div `
   display: flex;
   background: var(--segmented-buttons-bg-color-main);

package/lib/components/Tag/Tag.d.ts

@@ -21,4 +21,5 @@ export type TagProps = {
     onClose?: (event: React.MouseEvent) => void;
 };
 export declare function Tag({ children, color, icon, active, closable, onClick, onClose, size, borderless, withStatusDot, statusDotColor, ...otherProps }: TagProps): JSX.Element;
+export declare const ContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export {};

package/lib/components/Tag/Tag.js

@@ -14,6 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContentWrapper = void 0;
 exports.Tag = Tag;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
@@ -23,14 +24,14 @@ function Tag(_a) {
     var { children, color, icon, active, closable, onClick, onClose, size, borderless, withStatusDot, statusDotColor = 'var(--tag-status-dot-color-default)' } = _a, otherProps = __rest(_a, ["children", "color", "icon", "active", "closable", "onClick", "onClose", "size", "borderless", "withStatusDot", "statusDotColor"]);
     return (react_1.default.createElement(TagWrapper, Object.assign({ "data-component-name": "Tag/Tag", borderless: borderless, color: color, size: size, onClick: onClick, hasCloseButton: closable }, otherProps),
         withStatusDot ? react_1.default.createElement(StatusDot, { color: statusDotColor }) : icon ? icon : null,
-        react_1.default.createElement(ContentWrapper, null, children),
+        react_1.default.createElement(exports.ContentWrapper, null, children),
         closable && (react_1.default.createElement(CloseButton, { onClick: (event) => {
                 onClose === null || onClose === void 0 ? void 0 : onClose(event);
             } },
             react_1.default.createElement(CloseIcon_1.CloseIcon, null))),
         active && react_1.default.createElement(ActiveIcon, null)));
 }
-const ContentWrapper = styled_components_1.default.div `
+exports.ContentWrapper = styled_components_1.default.div `
   display: inline-flex;
   align-items: center;
   justify-content: center;

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

@@ -4,12 +4,8 @@ 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: () => { },
+    getControlState: () => null,
+    changeControlState: () => { },
     getFileText: () => '',
     areConditionsMet: () => false,
     handleDownloadCode: () => Promise.resolve(),

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

@@ -1,6 +1,4 @@
-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;
+import type { CodeWalkthroughFile, CodeWalkthroughFilter, InputsMarkdocAttr, TogglesMarkdocAttr, CodeWalkthroughFilterItem, CodeWalkthroughConditionsObject } from '@redocly/config';
 export type ActiveFilter = {
     id: string;
     label?: string;
@@ -8,15 +6,14 @@ export type ActiveFilter = {
 };
 export type WalkthroughControlsState = {
     activeFilters: ActiveFilter[];
-    getToggleState: getState<'toggle'>;
-    changeToggleState: changeState<'toggle'>;
-    getInputState: getState<'input'>;
-    changeInputState: changeState<'input'>;
-    getFilterState: getState<'filter'>;
-    changeFilterState: changeState<'filter'>;
+    getControlState: (id: string) => {
+        value: string | boolean;
+        render: boolean;
+    } | null;
+    changeControlState: (id: string, value: string | boolean) => void;
     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;
+export declare function useCodeWalkthroughControls(filters: Record<string, CodeWalkthroughFilter>, inputs: InputsMarkdocAttr, toggles: TogglesMarkdocAttr, enableDeepLink: boolean): WalkthroughControlsState;

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

@@ -9,130 +9,98 @@ const defaultControlsValues = {
     toggle: false,
     filter: '',
 };
-function useCodeWalkthroughControls(filters, inputs, toggles) {
+function useCodeWalkthroughControls(filters, inputs, toggles, enableDeepLink) {
     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 [controlsState, setControlsState] = (0, react_1.useState)(() => {
+        var _a, _b, _c, _d;
         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' });
+            initialState[id] = Object.assign(Object.assign({}, toggle), { render: true, type: 'toggle', value: enableDeepLink ? searchParams.get(id) === 'true' : false });
         }
-        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,
-            };
+            initialState[id] = Object.assign(Object.assign({}, input), { render: true, type: 'input', value: enableDeepLink ? ((_a = searchParams.get(id)) !== null && _a !== void 0 ? _a : input.value) : input.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) || '' });
+            const defaultValue = ((_c = (_b = filter === null || filter === void 0 ? void 0 : filter.items) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.value) || '';
+            initialState[id] = Object.assign(Object.assign({}, filter), { render: true, type: 'filter', value: enableDeepLink ? ((_d = searchParams.get(id)) !== null && _d !== void 0 ? _d : defaultValue) : defaultValue });
         }
         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 {
+    const changeControlState = (id, value) => {
+        setControlsState((prev) => {
+            const control = prev[id];
+            if (!control) {
+                console.error(`Control with id "${id}" not found.`);
                 return prev;
             }
+            switch (control.type) {
+                case 'input':
+                    if (typeof value !== 'string') {
+                        console.error(`Invalid value type for input "${id}". Input control type requires a string value.`);
+                        return prev;
+                    }
+                    break;
+                case 'toggle':
+                    if (typeof value !== 'boolean') {
+                        console.error(`Invalid value type for toggle "${id}". Toggle control type requires a boolean value.`);
+                        return prev;
+                    }
+                    break;
+                case 'filter':
+                    if (typeof value !== 'string') {
+                        console.error(`Invalid value type for filter "${id}". Filter control type requires a string value.`);
+                        return prev;
+                    }
+                    break;
+                default:
+                    console.error(`Invalid control type "${control === null || control === void 0 ? void 0 : control.type}" for control "${id}". Allowed types are "toggle", "input", or "filter".`);
+                    return prev;
+            }
+            return Object.assign(Object.assign({}, prev), { [id]: Object.assign(Object.assign({}, control), { value }) });
         });
     };
-    const getFilterState = (filterId) => {
-        const filterState = filtersState[filterId];
-        if (filterState) {
+    const getControlState = (id) => {
+        const controlState = controlsState[id];
+        if (controlState) {
             return {
-                render: filterState.render,
-                value: filterState.value,
+                render: controlState.render,
+                value: controlState.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 areConditionsMet = (conditions) => (0, utils_1.matchCodeWalkthroughConditions)(conditions, controlsState);
+        for (const [id, control] of Object.entries(controlsState)) {
+            if (control && !areConditionsMet(control)) {
+                controlsState[id].render = false;
+                controlsState[id].value = defaultControlsValues[control.type];
             }
         }
         const activeFilters = [];
         for (const [id, filter] of Object.entries(filters)) {
-            if (!filtersState[id].render) {
+            if (!controlsState[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'];
+                controlsState[id].render = false;
+                controlsState[id].value = defaultControlsValues['filter'];
                 continue;
             }
-            const currentValue = filtersState[id].value;
+            const currentValue = controlsState[id].value;
             if (currentValue) {
                 const isValueInActiveItems = activeItems.findIndex(({ value }) => value === currentValue) !== -1;
-                filtersState[id].value = isValueInActiveItems ? currentValue : activeItems[0].value;
+                controlsState[id].value = isValueInActiveItems ? currentValue : activeItems[0].value;
             }
             else {
-                filtersState[id].value = activeItems[0].value;
+                controlsState[id].value = activeItems[0].value;
             }
             activeFilters.push({
                 id,
@@ -140,8 +108,9 @@ function useCodeWalkthroughControls(filters, inputs, toggles) {
                 items: activeItems,
             });
         }
-        const handleDownloadCode = (files) => (0, utils_1.downloadCodeWalkthrough)(files, state, inputsState);
-        const getFileText = (file) => (0, utils_1.getCodeWalkthroughFileText)(file, state, inputsState);
+        const inputsState = Object.fromEntries(Object.entries(controlsState).filter(([_, controlState]) => controlState.type === 'input'));
+        const handleDownloadCode = (files) => (0, utils_1.downloadCodeWalkthrough)(files, controlsState, inputsState);
+        const getFileText = (file) => (0, utils_1.getCodeWalkthroughFileText)(file, controlsState, inputsState);
         const populateInputsWithValue = (node) => (0, utils_1.replaceInputsWithValue)(node, inputsState);
         return {
             activeFilters,
@@ -150,15 +119,16 @@ function useCodeWalkthroughControls(filters, inputs, toggles) {
             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]);
+    }, [filters, controlsState]);
     /**
      * Update the URL search params with the current state of the filters and inputs
      */
     (0, react_1.useEffect)(() => {
+        if (!enableDeepLink) {
+            return;
+        }
         const newSearchParams = new URLSearchParams(Array.from(searchParams.entries()));
-        for (const [id, { value }] of Object.entries(state)) {
+        for (const [id, { value }] of Object.entries(controlsState)) {
             if (value) {
                 newSearchParams.set(id, value.toString());
             }
@@ -172,12 +142,8 @@ function useCodeWalkthroughControls(filters, inputs, toggles) {
         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);
+    }, [filters, controlsState, navigate, location]);
+    return Object.assign({ changeControlState,
+        getControlState }, walkthroughContext);
 }
 //# sourceMappingURL=use-code-walkthrough-controls.js.map

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

@@ -1,7 +1,6 @@
 import type { CodeWalkthroughStepAttr } from '@redocly/config';
 type ActiveStep = string | null;
 type CodeWalkthroughStep = CodeWalkthroughStepAttr & {
-    active?: boolean;
     compRef?: HTMLElement;
 };
 export type WalkthroughStepsState = {
@@ -12,5 +11,5 @@ export type WalkthroughStepsState = {
     lockObserver?: React.MutableRefObject<boolean>;
     filtersElementRef?: React.RefObject<HTMLDivElement>;
 };
-export declare function useCodeWalkthroughSteps(steps: CodeWalkthroughStep[]): WalkthroughStepsState;
+export declare function useCodeWalkthroughSteps(steps: CodeWalkthroughStep[], enableDeepLink: boolean): WalkthroughStepsState;
 export {};

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

@@ -5,7 +5,7 @@ const react_1 = require("react");
 const react_router_dom_1 = require("react-router-dom");
 const utils_1 = require("../../../core/utils");
 const constants_1 = require("../../../core/constants");
-function useCodeWalkthroughSteps(steps) {
+function useCodeWalkthroughSteps(steps, enableDeepLink) {
     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]);
@@ -14,7 +14,7 @@ function useCodeWalkthroughSteps(steps) {
     const lockObserver = (0, react_1.useRef)(false);
     // Track observed elements in case new observer needs to be created
     const observedElementsRef = (0, react_1.useRef)(new Set());
-    const [activeStep, setActiveStep] = (0, react_1.useState)(searchParams.get(constants_1.ACTIVE_STEP_QUERY_PARAM));
+    const [activeStep, setActiveStep] = (0, react_1.useState)(enableDeepLink ? searchParams.get(constants_1.ACTIVE_STEP_QUERY_PARAM) : null);
     const register = (0, react_1.useCallback)((element) => {
         // for some reason, the observer is not ready immediately
         setTimeout(() => {
@@ -43,27 +43,29 @@ function useCodeWalkthroughSteps(steps) {
         if (lockObserver.current) {
             return;
         }
-        const stepsEntries = [];
+        const renderedSteps = steps.filter((step) => Boolean(step.compRef));
+        if (renderedSteps.length < 2) {
+            setActiveStep(((_a = renderedSteps[0]) === null || _a === void 0 ? void 0 : _a.id) || null);
+            return;
+        }
         for (const entry of entries) {
-            const { target } = entry;
-            const stepKey = Number((_a = target === null || target === void 0 ? void 0 : target.dataset) === null || _a === void 0 ? void 0 : _a.stepKey);
-            const stepActive = ((_b = target === null || target === void 0 ? void 0 : target.dataset) === null || _b === void 0 ? void 0 : _b.stepActive) === 'true';
+            const stepKey = Number((_c = (_b = entry.target) === null || _b === void 0 ? void 0 : _b.dataset) === null || _c === void 0 ? void 0 : _c.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((_c = target === null || target === void 0 ? void 0 : target.dataset) === null || _c === void 0 ? void 0 : _c.stepKey);
-            const step = steps[stepKey];
-            const renderedSteps = steps.filter((step) => Boolean(step.compRef));
             const stepIndex = renderedSteps.findIndex((renderedStep) => renderedStep.stepKey === step.stepKey);
             const { next } = (0, utils_1.getAdjacentValues)(renderedSteps, stepIndex);
             const intersectionAtTop = (rootBounds === null || rootBounds === void 0 ? void 0 : 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 = null;
                 if (stepGoesIn) {
@@ -84,7 +86,7 @@ function useCodeWalkthroughSteps(steps) {
         const filtersElementHeight = ((_a = 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;
         const newObserver = new IntersectionObserver(observerCallback, {
-            threshold: [0.8],
+            threshold: [0.8, 0.85, 0.9, 0.95],
             rootMargin: `-${filtersElementHeight + navbarHeight}px 0px 0px 0px`,
         });
         for (const observedElement of observedElementsRef.current) {
@@ -98,6 +100,9 @@ function useCodeWalkthroughSteps(steps) {
      * Update the URL search params with the current state of the filters and inputs
      */
     (0, react_1.useEffect)(() => {
+        if (!enableDeepLink) {
+            return;
+        }
         const newSearchParams = new URLSearchParams(Array.from(searchParams.entries()));
         if (activeStep) {
             newSearchParams.set(constants_1.ACTIVE_STEP_QUERY_PARAM, activeStep);

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

@@ -1,4 +1,4 @@
-import type { CodeWalkthroughFileset, CodeWalkthroughFile, CodeWalkthroughStepAttr, CodeWalkthroughFilter, InputsMarkdocAttr, TogglesMarkdocAttr } from '@redocly/config';
+import type { CodeWalkthroughFile, CodeWalkthroughStepAttr, CodeWalkthroughAttr } from '@redocly/config';
 import { type WalkthroughControlsState, type WalkthroughStepsState } from '../../../core/hooks';
 export type WalkthroughState = {
     stepsState: WalkthroughStepsState;
@@ -6,9 +6,4 @@ export type WalkthroughState = {
     downloadAssociatedFiles: CodeWalkthroughFile[];
     files: CodeWalkthroughFile[];
 };
-export declare function useCodeWalkthrough(steps: CodeWalkthroughStepAttr[], attributes: {
-    filters: Record<string, CodeWalkthroughFilter>;
-    filesets: CodeWalkthroughFileset[];
-    inputs: InputsMarkdocAttr;
-    toggles: TogglesMarkdocAttr;
-}): WalkthroughState;
+export declare function useCodeWalkthrough(steps: CodeWalkthroughStepAttr[], attributes: Omit<CodeWalkthroughAttr, 'steps' | 'preview'>): WalkthroughState;

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

@@ -3,9 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCodeWalkthrough = useCodeWalkthrough;
 const hooks_1 = require("../../../core/hooks");
 function useCodeWalkthrough(steps, attributes) {
-    const { filters, filesets, inputs, toggles } = attributes;
-    const stepsState = (0, hooks_1.useCodeWalkthroughSteps)(steps);
-    const controlsState = (0, hooks_1.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 = (0, hooks_1.useCodeWalkthroughSteps)(steps, enableDeepLink);
+    const controlsState = (0, hooks_1.useCodeWalkthroughControls)(filters, inputs, toggles, enableDeepLink);
     const files = filesets
         .filter((fileset) => controlsState.areConditionsMet(fileset))
         .flatMap((fileset) => fileset.files || []);

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

@@ -0,0 +1,9 @@
+import type { CodeWalkthroughFile } from '@redocly/config';
+import type { IconProps } from '../../../icons/types';
+export type RenderableFile = CodeWalkthroughFile & {
+    FileIcon: React.FunctionComponent<IconProps>;
+    parentFolder: string;
+    isNameDuplicate: boolean;
+    inRootDir: boolean;
+};
+export declare function useRenderableFiles(files: CodeWalkthroughFile[]): RenderableFile[];